强制多个选择更改，然后读取事件

Question

我对 jquery 比较陌生。一个星期以来，我一直在努力解决这个问题，试图找出解决方法。

基本上，我有两个相同的选择，将显示的数字更改为1时，然后将其更改为其他选择时，将原始数字更改为0。我的原始代码正常工作，但是我想扩展代码以便用户可以保存生成的 URL 并在以后重新加载他们的选择。

这是工作的 HTML。第二个选择也是一样，只是 ID 是 ability2。

<select id="ability1" onchange="attributeChoice( event )"><option value="selected">Select</option><option value="val1">One</option><option value="val2">Two</option><option value="val3">Three</option><option value="val4">Four</option><option value="val5">Five</option><option value="val6">Six</option></select>

还有工作的 jquery

function attributeChoice( event ) {

  $( event.currentTarget ).change(function() {
    var attributeChange = this.id;
    var attributeSelect = $(this).find('option:selected').attr('value');

    $('span#' + attributeSelect).html( 1 );
    $('select#' + attributeChange ).on( 'change', function() {
      $('span#' + attributeSelect).html( 0 );
    });
    getTotals();
  });
}

然后这段代码禁用了另一个选择的选定选项，因此它不能被选择两次。

    $('select').change(function() {
      $('select#ability1, select#ability2').not(this).children('option[value=' + this.value + ']').attr('disabled', true).siblings().removeAttr('disabled');
      $('select#ability1, select#ability2').not(this).children('option[value=selected]').attr('disabled', true);
    });

根据我的阅读，我需要使用 .change() 来强制触发 select 的 onchange。到目前为止，我没有任何运气。最初我使用 event.target 设置了 attributeChoice 函数，但我了解到它实际上一直追溯到触发它的开始。我转而使用 this 和 event.currentTarget。

这是我一直在玩弄的代码。关于我在这里做错了什么的任何想法？ （hattr1 是从 URL 中拉取的选中项的索引）

$('select#ability1').change(function() {
    $('select#ability1 option').eq(hattr1).prop('selected', true);
    $('select#ability1').change();
});

Answer 1

如果您想在change事件上的select中选择一个预先确定的option，请在更改事件上调用$.preventDefault()，然后使用$.prop()选择option '已经在做。

var $select = $('#ability1'),
    hattr1 = 3;

$select.on('change',function(e) {
  //e.preventDefault();
  $(this).find('option').eq(hattr1).prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ability1">
  <option>1</option>
  <option selected>2</option>
  <option>3</option>
  <option>4</option>
</select>