How to change value of second combo box on change value of first combo box using jquery?_问答_开发者

How to change value of second combo box on change value of first combo box using jquery?

开发者 https://www.devze.com 2023-01-06 18:46 出处：网络

I have two combo box on my page. And when i change the value of first combobox then the value开发者_开发技巧 of second combo box should be according to the first box.

相关专题：jquery

I have two combo box on my page. And when i change the value of first combobox then the value开发者_开发技巧 of second combo box should be according to the first box. if i change the grade A then the value of Scored marks should be 70% and if i change the grade B then the value of Scored marks should be 60%. Is it possible?I don't have any idea. Please help me.

Change Value of Combo

Grade Type Select Grade Type A B C None of these Scored marks No Result 70% 65%

Yes this is possible.

It would help us help you if you posted some example code, but what I would do is set a handler to the first combobox's "change" event:

$('#Combo1').bind('change',function() {$('#Combo2').val('This changed');} );

Or you can also do this the old plain Javascript way :) E.g.

<html>
...

<script type="text/Javascript">
  function changeScore() {    
    var oCombo1 = document.getElementById("COMBO1");
    if (oCombo1.value == "A") {
      document.getElementById("COMBO2").selectedIndex = 1;
    } else if (oCombo1.value == "B") {
      document.getElementById("COMBO2").selectedIndex = 2;
    } else if (oCombo1.value == "C") {
      document.getElementById("COMBO2").selectedIndex = 3;
    } else {
  document.getElementById("COMBO2").selectedIndex = 0;
}
  }
</script>

<form name="frmTEST" action="test.jsp">
<select id="COMBO1" name="COMBO1" onchange="changeScore()">
    <option value=""></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<select id="COMBO2" name="COMBO2">
    <option value=""></option>
    <option value="70">70</option>
    <option value="60">60</option>
    <option value="51">50</option>
</select>
</form>

...
</html>