Heim > Web-Frontend > js-Tutorial > Hauptteil

So wählen Sie den in der Auswahlkomponente angegebenen Wert mit JQuery aus

php中世界最好的语言
Freigeben: 2018-03-28 14:53:02
Original
2292 Leute haben es durchsucht

Dieses Mal werde ich Ihnen JQuery zeigen, wie Sie den in der Auswahlkomponente angegebenen Wert auswählen Das Folgende ist ein praktischer Fall.

jquery ruft den ausgewählten Text und Wert ab

Auswahl abrufen:

Ausgewählten Text abrufen:

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

Ausgewählten Wert abrufen:

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

Ausgewählten Index abrufen:

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

Auswahl festlegen:

Auswahl des ausgewählten Index festlegen:

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

Auswahlwert festlegen:

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

Auswahl festlegen: Ausgewählter Text:

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

Auswahloption festlegen:

$("#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='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

Arbeit muss die Werte abrufen in zwei Formen. 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(){
 $('#select1').each( //获得select1的所有值
   function(){
    $('button').click(function(){
      alert($('#select2').val()); //获得select2中的select1值
    });
   });
})
</script>
Nach dem Login kopieren

Es ist erwähnenswert, dass er nicht direkt als

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

HTML geschrieben werden kann:

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

Überprüfen zum Hinzufügen nach rechts> 🎜>Verwenden Sie JQuery und Ajax, um die Option „Auswählen“ aufzurufen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

//绑定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>"));
        }
      }
    });
  })
Nach dem Login kopieren
Wie man Axios verwendet, um die Download-Funktion in vue.js zu implementieren

Wie man mit Axios umgeht Fehler

Das obige ist der detaillierte Inhalt vonSo wählen Sie den in der Auswahlkomponente angegebenen Wert mit JQuery aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!