ToxifiedHashkey
ToxifiedHashkey

Reputation: 267

Want to select the first option in the `<Select>` tag on select of an option in the other `<Select>` tag - JQuery

I want to select the 1st option in the <select id="Widget1727491790"> i.e. "1", on select of an option in the <select id="Widget1315144869"> i.e. "250". I want to display "1" in the 2nd <select> tag on select of "250" in the 1st <select> tag.

When I do so, I am unable to change the value of the 2nd <select> i.e. from "1" to "2" or "3" or any further value. It gets stuck at the value "1" and I am unable to change it further.

Please just check the snippet to better understand my situation.

$(document).ready(function() {
  $('#Widget1315144869 option[value=""]').text('Select Weight');
  $('#Widget1727491790 option[value=""]').text('Select Quantity');
});

/* Quantity Auto Select - Dairy Products */
$(document).change(function() {
  var sw = $('#Widget1315144869');
  var sq = $('#Widget1727491790');
  if ($(sw).val() > '1') {
    $(sq).val('1');
  } else {
    $(sq).val('');
  }
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<select class="form-control" id="Widget1315144869" name="entry.2091496022">
  <option value="">- Choose -</option>
  <option value="250">250</option>
  <option value="500">500</option>
  <option value="750">750</option>
  <option value="1000">1000</option>
</select>
<select class="form-control" id="Widget1727491790" name="entry.1395838924">
  <option value="">- Choose -</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Upvotes: 0

Views: 29

Answers (1)

The problem is that you are using $(document).change(function() {}), so whenever something changes in the document it will run the code. Also when you change the $('#Widget1727491790');;

So when you change something in the second select it will set the select to 1 and that is why it feels like it never Changes.

Try using:

$('#Widget1315144869').change(function() {
  var sw = $(this).val();
  var sq = $('#Widget1727491790');
  if (sw > 1) {
    $(sq).val('1');
  } else
    $(sq).val('');
});

Demo

$(document).ready(function() {
  $('#Widget1315144869 option[value=""]').text('Select Weight');
  $('#Widget1727491790 option[value=""]').text('Select Quantity');
});

/* Quantity Auto Select - Dairy Products */
$('#Widget1315144869').change(function() {
  var sw = $(this).val();
  var sq = $('#Widget1727491790');
  if (sw > 1) {
    $(sq).val('1');
  } else
    $(sq).val('');
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<select class="form-control" id="Widget1315144869" name="entry.2091496022">
  <option value="">- Choose -</option>
  <option value="250">250</option>
  <option value="500">500</option>
  <option value="750">750</option>
  <option value="1000">1000</option>
</select>
<select class="form-control" id="Widget1727491790" name="entry.1395838924">
  <option value="">- Choose -</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Upvotes: 2

Related Questions