jQuery onChange在下拉列表中

我试图让下拉菜单改变依赖于选项属性的输入值，但是它始终将undefined作为值。jQuery onChange在下拉列表中

<select class="form-control" name="ph1_plantype" onChange="document.getElementById('ph1_price').value=$(this).attr('data-price');"> 
    <option data-price="Arron is shit">Plan Type</option> 
    <option data-price="1955">Topaz</option> 
    <option data-price="2945">Pearl</option> 
    <option data-price="3195">Sapphire</option> 
    <option data-price="3595">Ruby</option> 
    <option data-price="1695">Cremation Direct</option> 
    <option>Emerald</option> 
    <option>Other</option> 
</select><br /> 

<div class="form-group input-group"> 
    <span class="input-group-addon"><i class="fa fa-gbp"></i></span> 
    <input type="text" id="ph1_price" name="ph1_price" class="form-control" placeholder="Plan Price (excl interest)" > 
</div>

来源

2015-11-04 Arron

为什么不使用** option value =“”**？并且您有没有**数据价格的选项** –

数据库正在将数据存储在选项中，如果使用Value，它将覆盖这些数据。 – Arron

试试这个。您没有选择数据价格，而是从使用$（this）时直接选择。

<select class="form-control" name="ph1_plantype" onChange="$('#ph1_price').val($(this).find(':selected').data('price'));"> 
    <option data-price="Arron is shit">Plan Type</option> 
    <option data-price="1955">Topaz</option> 
    <option data-price="2945">Pearl</option> 
    <option data-price="3195">Sapphire</option> 
    <option data-price="3595">Ruby</option> 
    <option data-price="1695">Cremation Direct</option> 
    <option>Emerald</option> 
    <option>Other</option> 
</select><br /> 

<div class="form-group input-group"> 
    <span class="input-group-addon"><i class="fa fa-gbp"></i></span> 
    <input type="text" id="ph1_price" name="ph1_price" class="form-control" placeholder="Plan Price (excl interest)" value="" /> 
</div>

作为一个侧面说明，你最好不要使用内联处理程序。更好地利用这一点：

$('.form-control').change(function() { 
    $('#ph1_price').val($(this).find(':selected').data('price')); 
});

来源

2015-11-04 15:27:29

也建议不要使用内联处理程序。 – Tushar

你说得对，但我试图首先解决她的JS问题。谢谢。 –

当你引用$(this)你引用自身的下拉菜单中，因此不确定的数据价格。您想要遍历菜单中的更多步骤以找到所选的选项。

$(this).find(':selected').attr('data-price')

我已经把这个一起在这里： http://jsfiddle.net/wvsLcqop/3/

来源

2015-11-04 15:29:39 Yuschick

它被认为是一个坏实践使用内嵌处理器。使用jQuery的change或on('change'绑定元素上的更改事件。

$('.form-control').change(function() { 
    var price = $(this).find(':selected').attr('data-price'); 
    $('#ph1_price').val(price); 
});

通过使用data()到元素上获得data-*

$('select.form-control').change(function() { 
    $('#ph1_price').val($(this).find(':selected').data('price')); 
});

现场演示

$('select.form-control').change(function() { 
 
    $('#ph1_price').val($(this).find(':selected').data('price') || 'No price available'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" name="ph1_plantype"> 
 
    <option data-price="Arron is shit">Plan Type</option> 
 
    <option data-price="1955">Topaz</option> 
 
    <option data-price="2945">Pearl</option> 
 
    <option data-price="3195">Sapphire</option> 
 
    <option data-price="3595">Ruby</option> 
 
    <option data-price="1695">Cremation Direct</option> 
 
    <option>Emerald</option> 
 
    <option>Other</option> 
 
</select> 
 
<br /> 
 

 
<div class="form-group input-group"> 
 
    <span class="input-group-addon"><i class="fa fa-gbp"></i></span> 
 
    <input type="text" id="ph1_price" name="ph1_price" class="form-control" placeholder="Plan Price (excl interest)"> 
 
</div>

来源

2015-11-04 15:31:53

jQuery onChange在下拉列表中

回答

相关问题