![](/img/trans.png)
[英]How to make the Selected Option the width of the current Selected Option's text?
[英]How to manipulate selected option's value to be the same as option text with JavaScript
我有这种动态HTML / JavaScript格式,效果很好,但是我发现单击“提交”时,它将选项的值作为其索引而不是选项中的文本。
我曾尝试更改JavaScript代码,但似乎无法弄清楚该如何解决。
HTML
<!-- Category -->
<label for="type">Category<span class="required-input"> *</span></label>
<select id="type" name="type" onchange="ChangeTypeList()">
<option value="">--Select--</option>
<option value="Order Inquiry">Order Inquiry</option>
<option value="Product Inquiry">Product Inquiry</option>
</select>
<!-- Sub Category -->
<label for="reason">Sub Category</label>
<select id="reason" name="reason"></select>
JavaScript的
var reasons = {};
reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];
reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];
function ChangeTypeList() {
var typeList = document.getElementById("type");
var reasonsList = document.getElementById("reason");
var reasonsType = typeList.options[typeList.selectedIndex].value;
while (reasonsList.options.length) {
reasonsList.remove(0);
}
var decisions = reasons[reasonsType];
if (decisions) {
var i;
for (i = 0; i < decisions.length; i++) {
var decision = new Option(decisions[i], i);
reasonsList.options.add(decision);
// console.log('decision', decision);
}
}
}
当我选择第一个类别选项“订单查询”和console.log时:
console.log('decision', decision);
我在控制台中的“子类别”中看到以下内容:
<option value="0">Order Status</option>
<option value="1">Order Issue</option>
<option value="2">X</option>
理想情况下,我希望看到这是“子类别”的控制台:
<option value="Order Status">Order Status</option>
<option value="Order Issue">Order Issue</option>
<option value="X">X</option>
option
HTML元素具有value
和text
属性。
var options = document.getElementById("dropdown").children; for (var i = 0; i < options.length; i++) { options[i].value = options[i].text; }
<select id="dropdown"> <option value="0">A</option> <option value="1">B</option> <option value="2">C</option> </select>
您需要将decisions[i]
作为第二个参数传递给Option
。
语法 : new Option(text, value, defaultSelected, selected);
更多详情选项
var reasons = {}; reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X']; reasons['Product Inquiry'] = ['Product Weight', 'Product Quality']; function ChangeTypeList() { var typeList = document.getElementById("type"); var reasonsList = document.getElementById("reason"); var reasonsType = typeList.options[typeList.selectedIndex].value; while (reasonsList.options.length) { reasonsList.remove(0); } var reason = document.getElementById('reason'); var decisions = reasons[reasonsType]; if (decisions) { var i; for (i = 0; i < decisions.length; i++) { //This line is changed var decision = new Option(decisions[i], decisions[i]); reasonsList.options.add(decision); console.log('decision', decision); } } }
<label for="type">Category<span class="required-input"> *</span></label> <select id="type" name="type" onchange="ChangeTypeList()"> <option value="">--Select--</option> <option value="Order Inquiry">Order Inquiry</option> <option value="Product Inquiry">Product Inquiry</option> </select> <!-- Sub Category --> <label for="reason">Sub Category</label> <select id="reason" name="reason"></select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.