如果我有一個項目，如何從選項菜單中選擇項目

Question

當我只有一個項目時，我想從選項選擇菜單中選擇一個項目，以便在我的下一個函數中使用（$（'＃'）。on（“change”，function（）{}））

如果我在菜單中有多個項目，但是當我點擊該項目時有一個項目沒有任何結果，它是有用的：

從后端項目1 = [1] 2 = [1,2]和3 = [1,2,3]，可以選擇2和3，但不適用於我只有一個數字的第一項

HTML

<select id = "fir">
<option>one</option>
<option>two</option>
<option>three</option>
</select>

<select id="sec" >
<option ></option>
</select>

<input id="tbl_S2"  type="text" >

JavaScript的

$('#fir').on("click", function() {
  var schem =$("#fir").val();

    $.ajax({
    type: 'GET',
    url:'url/'+schem,
    success:function(data2){
        $("#sec").empty();
        for (var i = 0; i < data2.length; i++) {
        $("#sec").append("<option>"+data2[i]+"</option>");
       }
      }
    }                  
   },
  });
});


$('#fir').on("change", function() {
     $('#sec').on("change", function() {

           $('#tbl_S2').html( "hello");

     });
});

Answer 1

為了要選擇一個特定的項目，你應該使用option selected方法，即追加selected后數據2 [I] 如果只有一個列表中的項目。 （添加if語句）

你的if語句看起來與此類似：

if (data2.length == 1){
     $("#sec").append("<option selected>"+data2[i]+"</option>");
  }
else{
  for (var i = 0; i < data2.length; i++) {
     $("#sec").append("<option>"+data2[i]+"</option>");
  }
}

HTML輸出看起來像這樣

<select>
<option value="data" selected>Your variable</option>
</select>

希望這可以幫助

編輯：

下面的代碼片段是一個簡單的示例，說明如何顯示兩個下拉列表中的兩個值，即使下拉列表中只有一個項目。 請注意，在示例中，如果更改了第二個下拉列表（如果您在第二個選項中取消注釋），則在單擊其他下拉列表之前輸出文本不會更改。 我相信我可以用更多的時間來糾正這個問題。 這里有一個jsbin

我知道你的列表不是靜態的，而是動態的，你使用ajax來填充，但是我希望這提供了一個起點。

 var secSelect= ""; function showSelect(str) { var schem1=""; var returnText=""; var schem1= str; var sec1=document.getElementById("sec"); var hello=document.getElementById("text1"); var sec2=sec1.value; if (secSelect !=""){ sec1=secSelect; } hello.innerHTML = " hello"; returnText= schem1 +" " +sec2 + hello.value; document.getElementById("text1").innerHTML = returnText; }; function passSelect(str2){ secSelect=str2; } 

 #text1{background-color:white!important; width:150px; display:inline-block; height:13.5px; vertical-align:top;} #sec, #fir{display:inline-block; vertical-align:top; } 

 <select id="fir" onclick="showSelect(this.value);"> <option>one</option> <option>two</option> <option>three</option> </select> <select id="sec" onclick="passSelect(this.value);"> <option>one</option> <!--<option>rach</option>--> </select> <textarea id="text1" type="text"></textarea>