jQuery的选择填写一个元素

Question

我有以下列表：

<select id="selectprice" name="prod1">" 
<option value="1">prod1</select> 
<option value="2">prod2</select> 
<option value="3">prod3</select> 
</select> 

<input type="text" id="valueprice" name="price_incl" size="4"> 

我想下面的代码，当我从下拉式选项来更新我的价格：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("select[name='prod1']").change(function() { 
     if($(this).val()==1) { 
      $('#valueprice1').text("21.95"); 
      }// ect ect 
    }); 
    }); 
</script> 

但..它不工作，我似乎无法找出原因;）

问候

Answer 1

缺少结束TA的选项GS -

<option value="1">prod1</option> // not select 

而且它val()不text()

$('#valueprice').val("21.95"); 

的代码将是 -

$("select[name='prod1']").change(function() { 
    if($(this).val()==2) { 
     $('#valueprice').val("21.95"); 
    } 
}); 

FIDDLE

Answer 2

首先，你的id选择必须#valueprice，不#valueprice1

此外，关闭option标签与option，不select

最后，使用val代替text，因为这是一个input元素

$(document).ready(function() { 
 
     $("select[name='prod1']").change(function() { 
 
     if($(this).val()==1) { 
 
      $('#valueprice').val("21.95"); 
 
      }// ect ect 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select id="selectprice" name="prod1"> 
 
<option value="1">prod1</option> 
 
<option value="2">prod2</option> 
 
<option value="3">prod3</option> 
 
</select> 
 

 
<input type="text" id="valueprice" name="price_incl" size="4">

Answer 3

您应该使用val，而不是text设置元素的值。

$('#valueprice1').val("21.95"); 

在匹配的元素集中的每个元素的值。

文档：http://api.jquery.com/val/

Answer 4

2的问题，供选择的结束标记</option>不</select>，然后用.val()设置输入值

$(document).ready(function() { 
 
    $("select[name='prod1']").change(function() { 
 
    if ($(this).val() == 1) { 
 
     $('#valueprice').val("21.95"); 
 
    } // ect ect 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="selectprice" name="prod1">" 
 
    <option value="1">prod1</option> 
 
    <option value="2">prod2</option> 
 
    <option value="3">prod3</option> 
 
</select> 
 
<input type="text" id="valueprice" name="price_incl" size="4">

Answer 5

你是不是正确关闭您的options标签，您需要使用val()要设置的值，看到的修正在下面的例子：

$(document).ready(function() { 
 
    $("select[name='prod1']").change(function() { 
 

 
     if ($(this).val() == 1) { 
 
     alert('prod1 selected') 
 
     $('#valueprice1').val("21.95"); 
 
     } // ect ect 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="selectprice" name="prod1">" 
 
    <option value="1">prod1</option> 
 
    <option value="2">prod2</option> 
 
    <option value="3">prod3</option> 
 
</select>