选择“选项”时更改输入的占位符
Change placeholder of input when I select Option
我一直在尝试一些jQuery编码,但似乎不起作用。在#vat
输入中,我需要更改占位符。
<select id="VatExpense">
<option value="" disabled selected></option>
<option value="0"></option>
<option value="1"></option>
<option value="0"></option>
<option value="0"></option>
<option value="1"></option>
</select>
<input type="text" id="vat" placeholder="Rate">
您应该使用data-
属性而不是value
来确定费率。
演示小提琴
HTML:
<select id="VatExpense">
<option data-rate="20" value="" disabled selected>Expense Type</option>
<option data-rate="20" value="0">Telephone</option>
<option data-rate="0" value="1">Public Transport & Taxis</option>
<option data-rate="20" value="2">Computer Consumables</option>
<option data-rate="20" value="3">Subsistence</option>
<option data-rate="0" value="4">Overseas Travel</option>
</select>
然后在jQuery中读取它们,并相应地更改占位符。
脚本:
<script type="text/javascript">
$(function(){
$("#VatExpense").change(function(){
$("#vat").attr("placeholder", $(this).find(":selected").data("rate") + "%");
});
});
</script>
你可以试试这个:
Jquery:
$("#VatExpense").on("change", function() {
var vatExpense = $("#VatExpense option:selected").val();
var vatPlaceholder = "Rate";
if (vatExpense == 0) {
vatPlaceholder = "Standard rate 20%";
} else if (vatExpense == 1) {
vatPlaceholder = "Zero Rate 0%";
}
$("#vat").attr("placeholder", vatPlaceholder);
});
Js报价:http://jsfiddle.net/ghorg12110/kzmL0e1j/
你可以这样做:
(function() {
var placeholders = {
'value_':'Rate',
'value_0':'Standard rate 20%',
'value_1':'Zero Rate 0%'
};
$("#VatExpense").on('change', function(e) {
$("#vat").prop('placeholder', placeholders['value_' + $(this).val() ]);
});
})();
在下面这样尝试此处演示使用attr()
$('#VatExpense').change(function(){
var selectedval = $(this).val();
if(selectedval == 0){
$('#vat').attr('placeholder','Standard rate 20%');
}else if(selectedval == 1){
$('#vat').attr('placeholder','Zero Rate 0%');
}
});
相关文章:
- 需要URL模板占位符查找和替换功能的输入
- 选择“选项”时更改输入的占位符
- 更改 html 输入字段中的占位符属性
- 当用户在输入字段事件中输入内容时,为该字段事件添加动画占位符
- 持久性 HTML 输入占位符
- 用于更新输入的 Javascript 被占位符覆盖
- 输入占位符文本转换CSS样式
- 检测输入占位符是否可见
- Sencha Touch 2:在Android 4中未居中输入占位符
- 如何仅在分配时应用 Webkit 输入占位符
- 将输入占位符文本与span文本jquery交换
- 单击时更改输入占位符的不透明度
- 如何使用jQuery删除焦点上的输入占位符文本
- 新的输入占位符行为在Safari 10中-不再隐藏通过JavaScript更改
- 将PHP代码附加到HTML输入占位符
- 加载视图时设置的输入占位符
- Angularjs输入[占位符]指令与ng模型冲突
- 删除小屏幕/移动设备上的输入占位符,但在调整为桌面大小时再次添加它们
- Jquery取消按钮输入占位符文本
- JQuery随机输入占位符