Heim > Web-Frontend > js-Tutorial > jQuery ruft den Text und den Wert des Satzes ab, löscht ihn und wählt „selection_jquery' aus

jQuery ruft den Text und den Wert des Satzes ab, löscht ihn und wählt „selection_jquery' aus

WBOY
Freigeben: 2016-05-16 16:42:09
Original
1631 Leute haben es durchsucht

Auswahl erhalten:
Ausgewählten Text abrufen:

$("#ddlregtype").find("option:selected").text();
Nach dem Login kopieren

Rufen Sie den ausgewählten Wert ab, indem Sie Folgendes auswählen:

$("#ddlregtype ").val();
Nach dem Login kopieren

Rufen Sie den ausgewählten Index mit „select“ ab:

$("#ddlregtype ").get(0).selectedindex;
Nach dem Login kopieren

Auswahl festlegen:
Legen Sie den ausgewählten Index der Auswahl fest:

$("#ddlregtype ").get(0).selectedindex=index;//index为索引值
Nach dem Login kopieren

Ausgewählten Wert festlegen:

$("#ddlregtype ").attr("value","normal“);
$("#ddlregtype ").val("normal");
$("#ddlregtype ").get(0).value = value;
Nach dem Login kopieren

Ausgewählten Text auswählen:

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);
Nach dem Login kopieren

Auswahloptionselement festlegen:

$("#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
Nach dem Login kopieren

Auswahl löschen:

$("#ddlregtype ").empty();
Nach dem Login kopieren

Die Arbeit muss die Werte in den beiden Formen erhalten. Wie im Bild gezeigt:

Wie gelangt der Mehrwert vom linken Auswahlfeld zum rechten Auswahlfeld? Ich habe darüber nachgedacht, Webseiten-Spezialeffekte zu verwenden, um dies zu erreichen, und hier wurde die beliebtere JQuery verwendet.
Der js-Code lautet wie folgt:

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

Es ist erwähnenswert, dass es nicht direkt als

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

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>
Nach dem Login kopieren

Verwenden Sie JQuery und Ajax, um die Auswahloptionen dynamisch zu füllen

//绑定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>"));
}

}
});
})
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage