Heim  >  Artikel  >  Web-Frontend  >  JQuery wählt die ausgewählte Wertmethode der ausgewählten Komponente aus

JQuery wählt die ausgewählte Wertmethode der ausgewählten Komponente aus

亚连
亚连Original
2018-05-31 17:00:091685Durchsuche

Im Folgenden werde ich Ihnen einen Artikel über die Wertemethode zur Auswahl der JQuery-Auswahlkomponente vorstellen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

jquery ruft den ausgewählten Text und Wert ab

Auswahl abrufen:

Ausgewählten Text von „select“ abrufen:

$(“#ddlregtype”).find(“option:selected”).text();

Ausgewählten Wert von „select“ abrufen:

$(“#ddlregtype “).val();

Ausgewählten Index von „select“ abrufen:

$(“#ddlregtype “).get(0).selectedindex;

Auswahl festlegen:

Ausgewählten Index auswählen:

$(“#ddlregtype “).get(0).selectedindex=index;//index为索引值

Ausgewählten Wert festlegen:

(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).val(“normal”); 
$(“#ddlregtype “).get(0).value = value;

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=&#39;jquery&#39;]").attr("selected", true);

Wählen Sie die Option aus:

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

Löschen Sie die Auswahl:

$("#ddlregtype ").empty();

Bei der Arbeit müssen die Werte in den beiden Formen abgerufen werden. 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.

JS-Code lautet wie folgt:

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

Es ist erwähnenswert, dass er nicht direkt als

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

HTML geschrieben werden kann:

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7

Aktivieren Sie „Nach rechts hinzufügen“; >
Alles rechts hinzufügen>>

<<

Verwenden Sie JQuery, Ajax zum Aufrufen der Option zum dynamischen Auffüllen der Auswahloptionen

//绑定ClassLevel1单击事件
  $("#ClassLevel1").change(function () {
    var id = $("#ClassLevel1").val();
    var level2 = $("#ClassLevel2");
    level2.empty();
    $("#ClassLevel3").hide();
    $.ajax({
      url: "./askCommon.ashx?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=&#39;" + json[ind].id + "&#39;>" + json[ind].typename + "</option>"));
        }

      }
    });
  })

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Vue.js verschiebt die Array-Position und aktualisiert gleichzeitig die Ansicht

vue.js oder js implementiert die chinesische A-Z-Sortiermethode

Beispielcode des tatsächlichen statischen Knotendateiservers

Das obige ist der detaillierte Inhalt vonJQuery wählt die ausgewählte Wertmethode der ausgewählten Komponente aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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