CODEWITHSUNDEEP
javascriptjqueryhtml
user8079593
user8079593

Reputation:

Change select options on onload

What i do here is that when i select any option in a selectbox it automatically changes the option in another selectbox.But i want to change the options as soon as the page loads in my case it changes after clicking on the option.

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);
});

Upvotes: 0

Views: 3418

Answers (1)

Samich
Samich

Reputation: 30175

After binding to change event trigger the event itself:

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

Working example:

$(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();
});
<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>

P.S: Keeping values in JS array will make it more efficient

Upvotes: 2

Related Questions