jQuery使用同一文件中的多个下拉列表更改不同的值

时间:2014-01-01 18:36:43

标签: jquery html forms

通过选择下拉列表的值,我可以通过同时更新div和按钮的值来获得一个简单的解决方案。 就像选择1 = 10 $,按钮链接是http://one.com 并且选择2 = 20 $,按钮链接为http://two.com

看起来像这样:

<table>
  <tr>
  <div id="price_div">10$</div>
  </tr>
  <tr>
   <td class="span2"><select id="duaration_div" onChange="update();">
        <option value="0" SELECTED>One
        <option value="1" >Two
      </select>
    </td>
  </tr>
  <tr>
   <td><a href="http://one.com"></a></td>
  </tr>

jquery的:

//price function
  var alpha=new Array(
    "10$",
    "20$"
  );

  function update(){
    document.getElementById("price_div").innerHTML=alpha[document.getElementById("duaration_div").value];


 //button function

  var button=new Array(
        '<a class="btn " type="button" href="http://www.one.com/" target="_self">One</a>',
        '<a class="btn " type="button" href="http://www.two.com/" target="_self">Two</a>'
  );
    document.getElementById("button_div").innerHTML=button[document.getElementById("duaration_div").value];
  }

现在我有一个包含3种不同价格和3种不同按钮链接的表单。 但我不知道如何在jquery中为它构建一个概念。我希望每个下拉列表都能更改特定的字段和按钮。但是我该怎么做?

这是我的HTML:

<table>
  <tr>
  <div id="price_div">10$</div>
  <div id="price_div">50$</div>
  <div id="price_div">200$</div>
  </tr>
  <tr>
   <td class="span2"><select id="duaration_div" onChange="update();">
        <option value="0" SELECTED>One
        <option value="1" >Two
      </select></td>
    <td class="span2"><select id="beta" onChange="update();">
        <option value="2" SELECTED>One
        <option value="3" >Two
      </select></td>
    <td class="span2"><select id="gamma" onChange="update();">
        <option value="4" SELECTED>Test One
        <option value="5" >Test Two
      </select></td>
  </tr>
  <tr>
   <td><a href="http://one.com"></a></td> /* and two.com */
   <td><a href="http://three.com"></a></td> /*and four.com */
   <td><a href="http://five.com"></a></td> /* and six.com*/
  </tr>
  </table>

jQuery代码如何通过同一文件中的特定下拉列表更改每个值(价格1和2 /下拉1,价格3和4 /下拉2等)

任何想法?

THX!

1 个答案:

答案 0 :(得分:0)

如果我理解正确的话......

$('#gamma').val(4);
$('#beta').val(4);

或者一次性改变它们:

$('select').val(0);