How to set value to select box and trigger change event

Question

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.

This is not PHP related so please click the `<>` and post a [mcve] 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, Apr 08 '17 at 07:37
Can you use jQuery, I'm asking because there is a tag present. — Dan Philip, Apr 08 '17 at 07:59
Could you let me know what is missing in my answer, so I can adjust and you accept. — Asons, Apr 22 '17 at 09:35

score 1 · Answer 1 · answered Apr 08 '17 at 08:05

1

If you can use jQuery,

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

answered Apr 08 '17 at 08:05

Dan Philip

3,904
1
14
30

score 0 · Answer 2 · edited Apr 08 '17 at 11:32

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>

Kaushik Andani · Answer 3 · 2017-04-08T09:37:38.717

0

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.com/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>

edited Apr 08 '17 at 09:37

answered Apr 08 '17 at 08:03

Kaushik Andani

1,162
1
12
22

I have that value inside the drop down list only i need to set as keep it as selected. – Apr 08 '17 at 08:36
Its wrong .I need to select only you are always adding new . – Apr 08 '17 at 08:36
try above code and let me know if any changes needed – Kaushik Andani Apr 08 '17 at 09:38

Asons · Answer 4 · 2017-04-08T09:05:24.433

I recommend 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>

How to set value to select box and trigger change event

4 Answers4

Linked