Question

I am filling a drop down based on the value selected in the first drop down.Data being sent back from server is in JSON format and using JQuery to parse and fill the second select tag

<select name="abc" id="jobName">
  <option value="-1">Please select a  Job</option>
 </select>

This is my Jquery code

var selectedGroup = document.getElementById(groupDropDownId);
var groupdata = selectedGroup.options[selectedGroup.selectedIndex].value;
var formInput='group='+groupdata;

$.getJSON('search/getSchedulerJobListForGroup',formInput,function(data) {

    $('.result').html('' + data.jobList + '');
    $.each(data.jobList,function(index, value){
    var jobId = document.getElementById(resetDropDownId);
    var option=new Option(value,value);
    try{
         jobId.add(option);
       }
        catch(e){
          jobId.appendChild(option);
         }
       });
      });

    $("#jobName")[0].selectedIndex = 1;
    // $("#jobName").val($("#triggerjobName option:first").val());

in above code groupDropDownId is ID of the drop down based on whose value, second drop down will be filled.resetDropDownId is ID of second drop down which i am trying to fill from JSON data getting from the server.

Upon filling the drop down, its also creating an empty option tag and it is getting select by default.
I am not sure if i can add some default value to that empty option so that i can select that default option value like “please select bla bla.”

also i tried to select first element from the drop down but nothing seems working for me.I am wondering what i am doing wrong here?

Answer 1

Based on your question, it looks like you want to know how to change the value and text of an element within a dynamically populated select list.

Currently, you have this statement $("#jobName")[0].selectedIndex = 1; sitting outside of your getJSON request. If you move this inside of the getJSON function, it will work as expected.

If you want to set the value and text of that object, you’ll want to use ->

$('#jobId option:first').val("Some Value").text("other stuff");

You can see a working JS Fiddle using dynamically populated select list from a JSON object.

Fiddle