CODEWITHSUNDEEP
javascriptjquery
Lucas
Lucas

Reputation: 2984

How to change value from one Select to another?

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?

Upvotes: 1

Views: 609

Answers (4)

Jinesh Jain
Jinesh Jain

Reputation: 1242

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




    </form>
</body>
</html>

<script language="javascript" type="text/javascript">

    function setposition(svalue) {
        if (svalue == "0") {
            document.getElementById("t").options[1].selected = true;
        }
    }
</script>`enter code here`

Upvotes: 1

Hailwood
Hailwood

Reputation: 92581

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>

Upvotes: 0

ThiefMaster
ThiefMaster

Reputation: 318468

$('select[name="m"]').change(function() {
    if($(this).val() == '0') {
        $('select[name="t"]').val('0');
    }
});

Besides that, you should use jQuery to set the onchange events instead of doing so via inline JS:

$('select[name="t"], select[name="m"]').change(function() {
    $(this).closest('form').submit();
    // if you do not need any jquery submit events,
    // you can also use this.form.submit();
});

See http://jsfiddle.net/ThiefMaster/NfVQZ/ for a demo.

Upvotes: 0

Andy
Andy

Reputation: 30135

You could do something like that:

$(function(){
   $('[name="t"],[name="m"]').change(function(){
       if($(this).attr('name')=='m') && $(this).val()=='0'){
           $('[name="t"]').val('0');
       }

       $(this).closest('form').submit();
   });
});

Upvotes: 0

Related Questions