如何使用 JavaScript 操作选定选项的值与选项文本相同答案

【问题标题】：How to manipulate selected option's value to be the same as option text with JavaScript如何使用 JavaScript 操作选定选项的值与选项文本相同
【发布时间】：2019-02-07 00:10:26
【问题描述】：

我有一个运行良好的动态 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>

【问题讨论】：

阅读MDN's documentation on the Option constructor。它将文本作为第一个参数，将值作为第二个参数。
谢谢。我会阅读 MDN 文档。

标签： javascript html forms dom html-select

【解决方案1】：

您需要将decisions[i] 作为Option 中的第二个参数传递。
语法:new Option(text, value, defaultSelected, selected); 更多详细信息Option

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>

【讨论】：

【解决方案2】：

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>

【讨论】：