Question

假设我有一个文本框和一个这样的选择框。

<input type="text" id="txt"><br/><br/>

<select id="sel"></select>
    <option value="0"> Select Value </option>
    <option value="1"> Option 1</option>
    <option value="2"> Option 2 </option>

</select>

当我点击那个文本框并写一些东西时它会通过其他方法为选择框生成新的选项值。（意味着我在一些网站上使用TamperMonkey，他们使用一些方法来填充选项值，我想要通过tamparmoneky自动选择新生成的选项。这是新生成的选项值。

<select id="sel"></select>
    <option value="new0"> Select Value </option>
    <option value="new1"> New Option 1</option>
    <option value="new2"> New Option 2 </option>
    <option value="new3"> New Option 3 </option>
</select>

我的代码是

$(document).ready(function() {

  $('#txt').val("somevalue");
  //Trigger onchange event 
  $('#txt').trigger('change');

  // now how to know when option has changed
  $('#sel').change(function() {
     alert( 'Handler for .change() called.');
     $('#sel').val("new3");
  });


});

我的目标是当网站打开TamperMonkey脚本时自动为文本框输入一些值并触发更改事件。原始网站在更改事件上有一些功能。通过它们将新选项值填充到选择框。现在问题是我加载选项值时不明白。如何知道加载新选项值的时间，然后从我的Tamper Monkey脚本中选择值？

Answer 1

$(document).ready(function() {

  $('#txt').val("somevalue");
  //Trigger onchange event 
  $('#txt').on('change', function() {
    var txtInp = $('#txt').val();
    $('#sel option').each(function(i) {
      var modVal = txtInp+$(this).val();
      $(this).attr('value',modVal);
    });
  });

  // now how to know when option has changed
  $('#sel').change(function() {
     $(this).find('option:last-child').attr('selected');
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input type="text" id="txt"><br/><br/>

<select id="sel">
    <option value="0"> Select Value </option>
    <option value="1"> Option 1</option>
    <option value="2"> Option 2 </option>

</select>

Answer 2

我不知道文本框change事件中的内容，但如果它只是change事件，那么您可以做一件事，因为change事件得到只有在从文本框中取出焦点并且focusout事件在更改事件之后才被触发时才会触发，如下所示：

  $(document).ready(function() {

  $('#txt').val("somevalue");

  //Trigger onchange event 
  $('#txt').trigger('change');

  // attach focusout event to textbox this get called only after the change event
  $('#txt').on('focusout',function(){
    $('#sel').trigger('change'); // trigger select change event or any custom events
  });

  // now how to know when option has changed
  $('#sel').change(function() {
     alert( 'Handler for .change() called.');
     $('#sel').val("new3");
  });

});

希望这会有所帮助。（我知道这不是一个好选择，但它适合你的情况。）

动态加载选项值后，自动将值设置为选择框

2 个答案: