Meghna Meghna - 3 months ago 22
Javascript Question

How can i manage all selectbox when onchange in any one of them?

I have listing week days on my web page and every day have a select box as like below

<select name="day1" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>

<select name="day2" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>

<select name="day3" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
.
.
.
.


Here if i select any option from "day2" then how can i make all others select box value default or null, as well as if i select with "day1" then day2 and day3 should be default or null using jQuery

Answer

Just create a change listener on all select and change every element what is not() itself.

$("select").change(function() {
    $("select").not(this).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="day1">
  <option value="">select</option>
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
  <option value="3">Text 3</option>
</select>
<select name="day2">
  <option value="">select</option>
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
  <option value="3">Text 3</option>
</select>
<select name="day3">
  <option value="">select</option>
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
  <option value="3">Text 3</option>
</select>