I'm trying to select the data attribute from the selected option of a drop-down list then place it within a textbox. This is also my second data attribute. I'm going to add code for whenever the user changes the option (code I already have written and can abstract here), but I want to get this part to work first.
我正在尝试从下拉列表的选定选项中选择数据属性,然后将其放在文本框中。这也是我的第二个数据属性。我将在用户更改选项时添加代码(代码我已经编写并可以在这里抽象),但我希望首先使用此部分。
HTML
<select class="operations-supplier" name="operations-supplier">
<option data-selected="latam" data-capacity="100000" value="
10">LATAM - Supplier A</option>
<option data-selected="na" data-capacity="200000" value="20>">NA - Supplier B</option>
<option data-selected="asia" data-capacity="300000" value="30">ASIA - Supplier C</option>
</select>
<input type="text" class="operations-supplierCapacity" readonly />
JQuery
var capacityValue = $('select.operations-supplier').find(':selected').attr('data-capacity').val();
$('.operations-supplierCapacity').val(capacityValue);
5 个解决方案
#1
19
You can use data()
method in jQuery , Also add a change
event for dropdown
您可以在jQuery中使用data()方法,还可以为下拉列表添加更改事件
$(document).ready(function() {
$('select.operations-supplier').change(function() {
var capacityValue = $('select.operations-supplier').find(':selected').data('capacity');
$('.operations-supplierCapacity').val(capacityValue);
});
});
You need to wrap code within $(document).ready(function() {...});
, to bind event after dom element is loaded.
你需要在$(document).ready(function(){...})中包装代码; ,在加载dom元素后绑定事件。
#2
2
$('.operations-supplier').change(function(){
$('.operations-supplierCapacity').val($('.operations-supplier option:selected').attr('data-capacity'))
//alert($('.operations-supplier option:selected').attr('data-selected'))
})
#3
0
A data attribute isn't an input, and you don't need to call .val()
on it.
数据属性不是输入,您不需要在其上调用.val()。
The following will work just fine:
以下工作正常:
var capacityValue = $('select.operations-supplier').find(':selected').attr('data-capacity');
$('.operations-supplierCapacity').val(capacityValue);
#4
#5
0
In pure vanilla javascript you can use :
在纯香草javascript中你可以使用:
var supplierCapacity = this.selectedOptions[0].getAttribute('data-capacity'));
Example:
function OnSelectChange(event) {
document.getElementById('supplierCapacity').value = event.selectedOptions[0].getAttribute('data-capacity');
}
<select onchange="OnSelectChange(this)" class="operations-supplier" name="operations-supplier">
<option data-selected="latam" data-capacity="100000" value="10">LATAM - Supplier A</option>
<option data-selected="na" data-capacity="200000" value="20>">NA - Supplier B</option>
<option data-selected="asia" data-capacity="300000" value="30">ASIA - Supplier C</option>
</select>
<input id="supplierCapacity" type="text" class="operations-supplierCapacity" readonly />
#1
19
You can use data()
method in jQuery , Also add a change
event for dropdown
您可以在jQuery中使用data()方法,还可以为下拉列表添加更改事件
$(document).ready(function() {
$('select.operations-supplier').change(function() {
var capacityValue = $('select.operations-supplier').find(':selected').data('capacity');
$('.operations-supplierCapacity').val(capacityValue);
});
});
You need to wrap code within $(document).ready(function() {...});
, to bind event after dom element is loaded.
你需要在$(document).ready(function(){...})中包装代码; ,在加载dom元素后绑定事件。
#2
2
$('.operations-supplier').change(function(){
$('.operations-supplierCapacity').val($('.operations-supplier option:selected').attr('data-capacity'))
//alert($('.operations-supplier option:selected').attr('data-selected'))
})
#3
0
A data attribute isn't an input, and you don't need to call .val()
on it.
数据属性不是输入,您不需要在其上调用.val()。
The following will work just fine:
以下工作正常:
var capacityValue = $('select.operations-supplier').find(':selected').attr('data-capacity');
$('.operations-supplierCapacity').val(capacityValue);
#4
0
You can get data using .data() function as follows:
您可以使用.data()函数获取数据,如下所示:
$('select.operations-supplier').on('change', function() {
var capacityValue = $('select.operations-supplier').find(':selected').data('capacity');
$('.operations-supplierCapacity').val(capacityValue);
});
#5
0
In pure vanilla javascript you can use :
在纯香草javascript中你可以使用:
var supplierCapacity = this.selectedOptions[0].getAttribute('data-capacity'));
Example:
function OnSelectChange(event) {
document.getElementById('supplierCapacity').value = event.selectedOptions[0].getAttribute('data-capacity');
}
<select onchange="OnSelectChange(this)" class="operations-supplier" name="operations-supplier">
<option data-selected="latam" data-capacity="100000" value="10">LATAM - Supplier A</option>
<option data-selected="na" data-capacity="200000" value="20>">NA - Supplier B</option>
<option data-selected="asia" data-capacity="300000" value="30">ASIA - Supplier C</option>
</select>
<input id="supplierCapacity" type="text" class="operations-supplierCapacity" readonly />