Rumah > hujung hadapan web > tutorial js > jQuery mendapat teks dan nilai set, kosongkan, dan pilih selection_jquery

jQuery mendapat teks dan nilai set, kosongkan, dan pilih selection_jquery

WBOY
Lepaskan: 2016-05-16 16:42:09
asal
1611 orang telah melayarinya

Dapatkan pilihan:
Dapatkan teks pilihan:

$("#ddlregtype").find("option:selected").text();
Salin selepas log masuk

Dapatkan nilai yang dipilih dengan memilih:

$("#ddlregtype ").val();
Salin selepas log masuk

Dapatkan indeks dipilih dengan memilih:

$("#ddlregtype ").get(0).selectedindex;
Salin selepas log masuk

Tetapkan pilihan:
Tetapkan indeks terpilih bagi pilihan:

$("#ddlregtype ").get(0).selectedindex=index;//index为索引值
Salin selepas log masuk

Tetapkan nilai yang dipilih:

$("#ddlregtype ").attr("value","normal“);
$("#ddlregtype ").val("normal");
$("#ddlregtype ").get(0).value = value;
Salin selepas log masuk

Tetapkan teks terpilih:

var count=$("#ddlregtype option").length;
for(var i=0;i<count;i++)
{ if($("#ddlregtype ").get(0).options[i].text == text)
{
$("#ddlregtype ").get(0).options[i].selected = true;
break;
}
}
$("#select_id option[text='jquery']").attr("selected", true);
Salin selepas log masuk

Tetapkan item pilihan pilihan:

$("#select_id").append("<option value='value'>text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的option
$("#select_id option[index='0']").remove();//删除索引值为0的option
$("#select_id option[value='3']").remove(); //删除值为3的option
$("#select_id option[text='4']").remove(); //删除text值为4的option
Salin selepas log masuk

Kosongkan pilihan:

$("#ddlregtype ").empty();
Salin selepas log masuk

Kerja perlu mendapatkan nilai dalam dua bentuk. Seperti yang ditunjukkan dalam gambar:

Bagaimana untuk mendapatkan nilai tambah dari kotak pilihan kiri ke kotak pilihan kanan? Saya berfikir tentang menggunakan kesan khas halaman web untuk mendapatkannya, dan jquery yang lebih popular digunakan di sini.
Kod js adalah seperti berikut:

//获取所有属性值 var item = $("#select1").val();
$(function(){
$('#select1').each( //获得select1的所有值
function(){
$('button').click(function(){
alert($('#select2').val()); //获得select2中的select1值
});
});
})
</script>
Salin selepas log masuk

Perlu diingat bahawa ia tidak boleh ditulis secara langsung sebagai

$(function(){
$('#select2').each( //获得select1的所有值,因为前面讲选项从左边添加到右边,jquery其实并没有真正将值从左边传到右边。
function(){
$('button').click(function(){
alert($(this).val()); //获得select2中的select1值
});
});
})
Salin selepas log masuk

html:

<div class="centent">
<select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;">
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
Salin selepas log masuk

Gunakan JQuery dan Ajax untuk mengisi pilihan Pilih secara dinamik

//绑定ClassLevel1单击事件
$("#ClassLevel1").change(function () {
var id = $("#ClassLevel1").val();
var level2 = $("#ClassLevel2");
level2.empty();
$("#ClassLevel3").hide();
$.ajax({
url: "./askCommon.ashx&#63;action=getclasslevel&pid=" + id,
data: { "type": "ajax" },
datatype: "json",
type: "get",
success: function (data) {
var json = eval_r(data);
for (var ind in json) {
level2.append($("<option value='" + json[ind].id + "'>" + json[ind].typename + "</option>"));
}

}
});
})
Salin selepas log masuk
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan