Question

我在这里做的是，当我在选择框中选择任何选项时，它会自动更改另一个选择框中的选项。但是我想在页面加载后立即更改选项，在单击选项后它会发生变化。

HTML：

<select name="ref_type_selectbox" id="ref_type_selectbox" class="selectbox_two" accesskey="t">
<option value="1" selected="selected">Numbered item</option>
<option value="2">Heading</option>
<option value="3">Footnote</option>
<option value="4">Endnote</option>
<option value="5">Equation</option>
</select>

<select name="ref_to_selectbox" id="ref_to_selectbox" class="reference_to_selectbox" accesskey="r">
<option value="1" selected="selected">Page number</option>
<option value="1">Paragraph number(no content)</option>
<option value="1">Paragraph number(full content)</option>
<option value="1">Paragraph Text</option>
<option value="1">Above/Below</option>
<option value="2">Heading Text</option>
<option value="2">Heading number(no content)</option>
<option value="2">Heading number(full content)</option>
<option value="2">Above/Below</option>
<option value="3">Footnote number</option>
<option value="3">Above/Below</option>
<option value="3">Footnote number(formatted)</option>
<option value="4">Endnote number</option>
<option value="4">Above/Below</option>
<option value="4">Endnote number(formatted)</option>
</select>

JS：

$("#ref_type_selectbox").change(function() 
{
if ($(this).data('options') === undefined) {
$(this).data('options', $('#ref_to_selectbox option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#ref_to_selectbox').html(options);
});

Answer 1

绑定到change事件后触发事件本身：

$("#ref_type_selectbox").change();

工作示例：

＆＃13;

$(document).ready(function(){
  $("#ref_type_selectbox").change(function() 
  {
  if ($(this).data('options') === undefined) {
  $(this).data('options', $('#ref_to_selectbox option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#ref_to_selectbox').html(options);
  });
  
  $("#ref_type_selectbox").change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ref_type_selectbox" id="ref_type_selectbox" class="selectbox_two" accesskey="t">
<option value="1" selected="selected">Numbered item</option>
<option value="2">Heading</option>
<option value="3">Footnote</option>
<option value="4">Endnote</option>
<option value="5">Equation</option>
</select>

<select name="ref_to_selectbox" id="ref_to_selectbox" class="reference_to_selectbox" accesskey="r">
<option value="1" selected="selected">Page number</option>
<option value="1">Paragraph number(no content)</option>
<option value="1">Paragraph number(full content)</option>
<option value="1">Paragraph Text</option>
<option value="1">Above/Below</option>
<option value="2">Heading Text</option>
<option value="2">Heading number(no content)</option>
<option value="2">Heading number(full content)</option>
<option value="2">Above/Below</option>
<option value="3">Footnote number</option>
<option value="3">Above/Below</option>
<option value="3">Footnote number(formatted)</option>
<option value="4">Endnote number</option>
<option value="4">Above/Below</option>
<option value="4">Endnote number(formatted)</option>
</select>

＆＃13;

P.S：保持JS数组中的值将使其更有效

更改onload上的选择选项

1 个答案: