Question

I have two Selects with several options in html code:

<select name="t" id="t">
<option value="0">Overall</option>
<option value="1">t_name</option></select>

<select name="m" id="m">
<option value="0">back to Overall</option>
<option value="1">m_some</option></select>

And my question is how to force change value from first Select named “t” to “0” (Overall) only in the case when user chosen value “0” (back to Overall) in second Select named “m”? And submit form at the end.

–EDIT–

Now because of advices I tried do that in this way:

<script>
$(function(){
  $('#m, #t').change(function(){
    if($('#m').val() == '0')
      $('#t').val('0').change();
      $('form#myform').submit();   
  });
});
</script>

And this script submits the form everytime when I change Select “m” or “t”, except situation when I change Select “m” to value “0” (script only changes “t” to “0” in correct way without submit). Why?

Answer 1

You should be using ID’s as below as they are easier on DOM searching.

<select name="t" id="t" onchange="this.form.submit();">
<option value="0">Overall</option>
<option value="1">t_name</option></select>

<select name="m" id="m" onchange="this.form.submit();">
<option value="0">back to Overall</option>
<option value="1">m_some</option></select>

<script>
$(function(){
  $('#m, #t').change(function(){
    //don't forget to trigger the change event
    if($('#m').val() == '0')
      $('#t').val('0').change();

      $('form#form_id').submit();   
  });
});
</script>