how can i select item from option menu if i have one item

Question

I want to select an item from option select menu when I have just one item in order to use in my next function ( $('#').on("change", function() {}) )

it's work when I have more than one item in the menu but if there is one item when I clicking on that one item there is no any result:

from the backend item one=[1] two=[1,2] and three=[1,2,3], it is ok for selecting two and three but not for item one which I have only one number inside

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

In order for a particular item to be selected, you should use the option selected method, ie append selected after data2[i] if there is only one item in the list. (add an if statement)

Your if statement would look similar to this:

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

The HTML output would look something like this

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

Hope this helps

EDIT:

The below snippet is a simple example of how to show both values from two dropdowns, even when one only has one item in the dropdown. Please note that in the example, if the second dropdown is changed (if you un-comment back in the second option), the output text doesn't change until the other dropdown is clicked. I'm sure I could have corrected this with a little more time spent. There is a jsbin here

I am aware that your list is not static, but dynamic, that you are using ajax to populate, however I hope this provides a starting point.

 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>