I need one help. I need to set value to select box dynamically and trigger the change event. I am explaining my code below.

<select class="chosen-select text-left" style="width:100%;"  onchange="setCountry();" id="conid">
<option value="" selected>Select Country</option>
<?php
    foreach ($country as $v) {
?>
<option value="<?php echo $v['country_id']; ?>"><?php echo $v['country_name']; ?></option>
<?php
    }
?>
</select>

Here I am fetching the value like below.

var conval=document.getElementById('conid');
selectVal=conval.options[conval.selectedIndex].text;

Suppose I have one country name India and I need to set dynamically to that select box and at the same time the change event(i.e-setCountry) will trigger.Please help me.

I need one help. I need to set value to select box dynamically and trigger the change event. I am explaining my code below.

<select class="chosen-select text-left" style="width:100%;"  onchange="setCountry();" id="conid">
<option value="" selected>Select Country</option>
<?php
    foreach ($country as $v) {
?>
<option value="<?php echo $v['country_id']; ?>"><?php echo $v['country_name']; ?></option>
<?php
    }
?>
</select>

Here I am fetching the value like below.

var conval=document.getElementById('conid');
selectVal=conval.options[conval.selectedIndex].text;

Suppose I have one country name India and I need to set dynamically to that select box and at the same time the change event(i.e-setCountry) will trigger.Please help me.

• javascript
• jquery

Share Improve this question Follow edited Apr 8, 2017 at 7:49 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Apr 8, 2017 at 7:35 user5443928user5443928 3

• This is not PHP related so please click the <> and post a minimal reproducible example without PHP. If you must use inline JS, do onchange="setCountry(this);" and function setCountry(sel) { var val = sel.value, text = sel.options[sel.selectedIndex].text; } – mplungjan Commented Apr 8, 2017 at 7:37
• Can you use jQuery, I'm asking because there is a tag present. – Dan Philip Bejoy Commented Apr 8, 2017 at 7:59
• Could you let me know what is missing in my answer, so I can adjust and you accept. – Asons Commented Apr 22, 2017 at 9:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

If you can use jQuery,

$("#conid").val("India").change();

I remend to use addEventListener, here used with querySelector to get the select element with the name attribute country, document.querySelector('select[name=country]')

If you now would want to set a specific option without actually selecting it manually, you can do that with code, here showed with a button

/* on page load */
window.addEventListener('load', function() {

  /* on change */
  document.querySelector('select[name=country]').addEventListener('change', function() {

    var selectVal = this.options[this.selectedIndex].text;

    /* for this demo only */
    console.log(selectVal);
  })

  /* select a value */
  document.querySelector('button').addEventListener('click', function() {
    var select = document.querySelector('select[name=country]');
    select.value = 'India';

    /* since programatically changes won't fire the change event,
       we need to do it ourselves */
    var event = document.createEvent("HTMLEvents");
    event.initEvent("change",true,false);
    select.dispatchEvent(event);

    /* one can use CustomEvent also, though won't work in IE

    var event = new CustomEvent("change");
    select.dispatchEvent(event);

    */
  })

})

button {
  margin-top: 50px;
}

<select name="country">
  <option value="">Select Country</option>
  <option value="India">India</option>
  <option value="Norway">Norway</option>
</select>

<br>
<button>Select India</button>

try this new code and let me know if any changes needed

function getValue(cVal)
{
  var countryName = cVal;
  alert(countryName);
}

function setValue()
{
  var newVal = $("#dynamic").val();
  
  $("#country").val(newVal.toLowerCase());
  
  alert("set country successfully");
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="country" id="country" onChange="getValue(this.value)">

<option value=""> Please select value</option>
<option value="usa">USA</option>
<option value="india"> India </option>
</select>
<br/>
<br/>
Add country Name :
<input type="text" name="dynamic" id="dynamic">
<button name="setcountry" onClick="setValue()">Set Country</button>

onChange has to be called while adding a dynamic element to select element.

<button type="button" onclick="myFunction()" >Insert option</button>

<select id="mySelect" onchange="showmessage()">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>

<script>
function myFunction() {
  var x = document.getElementById("mySelect");
  var option = document.createElement("option");
  option.text = "Kiwi";
  option.selected = true;
  x.add(option);
  x.onchange();
}

function showmessage()
{
 var conval=document.getElementById('mySelect');
 selectVal=conval.options[conval.selectedIndex].text;
 alert(selectVal);
}
</script>