如果我有一个项目，如何从选项菜单中选择项目

Question

当我只有一个项目时，我想从选项选择菜单中选择一个项目，以便在我的下一个功能中使用（$（＆＃39;＃＆＃39;）。on（＆＃34;更改＆＃34 ;，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方法，即在data2 [i] 之后附加selected，如果列表中只有一个项目。< / em>（添加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 here

我知道你的列表不是静态的，而是动态的，你使用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>