Question

我需要一个帮助。我需要设置值以动态选择框并触发更改事件。我在下面解释我的代码。

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

我在这里获取如下的值。

India

假设我有一个国家/地区名称i.e-setCountry，我需要动态设置到该选择框，同时触发更改事件（=IFERROR(SMALL(Sheet1!A:A,ROW()),"")）。请帮助我。

Answer 1

在为选择元素添加动态元素时，必须调用onChange。

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

Answer 2

尝试这个新代码并告诉我是否需要进行任何更改

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>

Answer 3

如果你可以使用jQuery，

.div-two {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div2 0.2s forwards;
  animation: left-to-right-div2 0.2s forwards;
}
.div-three {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}
.div-four {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}

Answer 4

我建议使用addEventListener，此处与querySelector一起使用，以获取select属性 country 的name元素，{{1 }}

如果您现在想要设置特定选项而不实际选择它，可以使用代码执行此操作，此处显示按钮

document.querySelector('select[name=country]')

/* 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;
}

如何设置值以选择框并触发更改事件

4 个答案: