Измените параметр <select> и активируйте события с помощью JavaScript.

Ответ 1

К сожалению, вам нужно вручную запустить событие change. И Event Contructor будет лучшим решением.

var select = document.querySelector('#sel'),
    input = document.querySelector('input[type="button"]');
select.addEventListener('change',function(){
    alert('changed');
});
input.addEventListener('click',function(){
    select.value = 2;
    select.dispatchEvent(new Event('change'));
});

<select id="sel" onchange='alert("changed")'>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3' selected>Three</option>
</select>
<input type="button" value="Change option to 2" />

Ответ 2

Скриншот моего решения здесь. Но на всякий случай он истечет, я также вставлю код.

HTML:

<select id="sel">
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>
<input type="button" id="button" value="Change option to 2" />

JS:

var sel = document.getElementById('sel'),
    button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;

    // firing the event properly according to StackOverflow
    // http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        sel.dispatchEvent(evt);
    }
    else {
        sel.fireEvent("onchange");
    }
});

sel.addEventListener('change', function (e) {
    alert('changed');
});

Ответ 3

Это так просто:

var sel = document.getElementById('sel');
var button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;
    sel.onchange();
});

Но этот путь имеет проблему. Вы не можете вызывать события так же, как и обычные функции, потому что может быть несколько функций, которые прослушивают событие, и их можно установить несколькими способами.

К сожалению, "правильный путь" для запуска события не так просто, потому что вы должны делать это по-другому в Internet Explorer (используя document.createEventObject) и Firefox (используя document.createEvent( "HTMLEvents" ))

var sel = document.getElementById('sel');
var button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;
    fireEvent(sel,'change');

});


function fireEvent(element,event){
    if (document.createEventObject){
    // dispatch for IE
    var evt = document.createEventObject();
    return element.fireEvent('on'+event,evt)
    }
    else{
    // dispatch for firefox + others
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
    return !element.dispatchEvent(evt);
    }
}

Ответ 4

Все события создания и диспетчеризации работают, но поскольку вы используете атрибут onchange, ваша жизнь может быть немного проще:

http://jsfiddle.net/xwywvd1a/3/

var selEl = document.getElementById("sel");
selEl.options[1].selected = true;
selEl.onchange();

Если вы используете API-интерфейс браузера (addEventListener, IE AttachEvent и т.д.), вам нужно будет создавать и отправлять события, как уже указывали другие.

Ответ 5

Попробуйте следующее:

<select id="sel">
 <option value='1'>One</option>
  <option value='2'>Two</option> 
  <option value='3'>Three</option> 
  </select> 


  <input type="button" value="Change option to 2"  onclick="changeOpt()"/>

  <script>

  function changeOpt(){
  document.getElementById("sel").options[1].selected = true;

alert("changed")
  }

  </script>

Ответ 6

Эти вопросы могут иметь отношение к тому, что вы просите:

• Как я могу запустить событие onchange вручную?

• Как вызвать событие в поле ввода, измененное с помощью javascript

Вот мои мысли: вы можете складывать более одного вызова в своем событии onclick следующим образом:

<select id="sel" onchange='alert("changed")'>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>
<input type="button" onclick='document.getElementById("sel").options[1].selected = true; alert("changed");' value="Change option to 2" />

Вы также можете вызвать функцию для этого.

Если вы действительно хотите назвать одну функцию и оба ведут себя одинаково, я думаю, что что-то вроде этого должно работать. На самом деле это не соответствует лучшей практике "Функции должны делать одно и делать это хорошо", но это позволяет вам вызывать одну функцию для обработки обоих способов изменения раскрывающегося списка. В основном я передаю (значение) на событие onchange и (null, индекс опции) в событии onclick.

Вот код: http://codepen.io/mmaynar1/pen/ZYJaaj

<select id="sel" onchange='doThisOnChange(this.value)'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" onclick='doThisOnChange(null,1);' value="Change option to 2"/>

<script>
doThisOnChange = function( value, optionIndex)
{
    if ( optionIndex != null )
    {
       var option = document.getElementById( "sel" ).options[optionIndex];
       option.selected = true;
       value = option.value;
    }
    alert( "Do something with the value: " + value );
}
</script>

Ответ 7

Вы можете запустить событие вручную после изменения выбранного параметра в событии onclick: document.getElementById("sel").onchange();

Ответ 8

HTML, используя Razor:

 @Html.DropDownList("test1", Model.SelectOptionList, new { id = "test1", onchange = "myFunction()" })

JS-код:

function myFunction() {

            var value = document.getElementById('test1').value;

            console.log("it has been changed! to " + value );
        }