jquery create dynamic select list code example

Example 1: jquery dynamic drop down list example

HTML:

<div class="col-md-4" >
    <select class="company">
          <option value=''><strong>Name</strong></option>
          <option value="Company A">Company A</option>
          <option value="Company B">Company B</option>
    </select>
</div>
<div class="col-md-4" >
    <select class="product">
          <option value=''><strong>Products</strong></option>
    </select>
</div>
JavaScript

var series = [
{name: 'Company A', product: 'A1'},
{name: 'Company A', product: 'A2'},
{name: 'Company A', product: 'A3'},
{name: 'Company B', product: 'B1'},
{name: 'Company B', product: 'B2'}
]

$(".company").change(function(){
    var company = $(this).val();
    var options =  '<option value=""><strong>Products</strong></option>'; //create your "title" option
    $(series).each(function(index, value){ //loop through your elements
        if(value.name == company){ //check the company
            options += '<option value="'+value.product+'">'+value.product+'</option>'; //add the option element as a string
        }
    });

    $('.product').html(options); //replace the selection's html with the new options
});

Example 2: dynamic select option dropdown in jquery

var temp = "myValue";

// Create New Option.
var newOption = $('<option>');
newOption.attr('value', temp).text(temp);

// Append that to the DropDownList.
$('#dptcentres_edit').append(newOption);

// Select the Option.
$("#dptcentres_edit > [value=" + temp + "]").attr("selected", "true");