如何获取嵌入在选择选项中的输入文本的值？答案

【问题标题】：How to get the value of input text embedded in select option?如何获取嵌入在选择选项中的输入文本的值？
【发布时间】：2019-03-28 03:34:02
【问题描述】：

在我的 html 模板中，<select> 标记中有一组选项。一个特定选项允许您在输入文本字段中输入自定义类别名称。

现在单击提交按钮后，我无法在输入字段中获取值（如果在其中输入了值）。

这里是 HTML <select> 和 <input> 字段：

 {% for index in list %}

   <select name="browser" id="select_id{{index}}" onchange="if(this.options[this.selectedIndex].value=='customOption'){toggleField(this,this.nextSibling); this.selectedIndex='0';}">

     <option value="0">---- select ----</option>
     <option value="customOption">[enter your own custom category]</option>
     <option value="Chrome">Chrome</option>
     <option value="Firefox">Firefox</option>
     <option value="Internet Explorer">Internet Explorer</option>

     <input name="browser" id="input_id{{index}}" type="text" disabled="disabled" onblur="if(this.value==''){toggleField(this,this.previousSibling);}">

    </select>

    <!-- SUBMIT BUTTON TO INVOKE add_category() javascript method -->

    <button type="button" onclick="add_category('select_id{{index}}', 'input_id{{index}}');">SUBMIT</button>

 {% endfor %}

在add_category() 中，我只想在屏幕上显示选择/键入的类别值作为警报消息。

function add_category(select_id, input_id){
        if($("#"+select_id).val()=='0')
        {
            alert("Please select a valid category");
        }
        else if($("#"+select_id).val()=='customOption')
        {
            var i = $("#"+input_id).val();
            alert("INPUT CATEGORY: ", i);
        }
        else
        {
            var s = $("#"+select_id).val();
            alert("SELECTED CATEGORY: ", s);        
        }
    }

但是，在输入或选择的类别值中没有返回值。

【问题讨论】：

您是否尝试从文本输入中删除disabled="disabled" 属性？
您是否在选择框中获取输入字段？？
<select> 元素不能有 <input/> 元素作为后代
请经常校对您的帖子。此问题缺少关键信息，因为 <html> 元素已消失 - 它们需要反引号。

标签： javascript jquery html

【解决方案1】：

您可以使用下面的 sn-p 检索选择的值，这将对您有所帮助。

var mySelect = $('select[name=browser');
var conceptName = mySelect.find(":selected").text();
console.log(conceptName)

可执行的 sn-p 在下面的代码 Pen URL https://codepen.io/redhatvicky/pen/RdzEGW

【讨论】：

【解决方案2】：

function add_category(select_id, input_id){
        if($("#"+select_id+"").val()=='0')
        {
            alert("Please select a valid category");
        }
        else if($("#"+select_id+"").val()=='customOption')
        {
            var i = $("#"+input_id+"").val();
            alert("INPUT CATEGORY: ,"+i);
        }
        else
        {
            var s = $("#"+select_id+"").val();
            alert("SELECTED CATEGORY: ,"+ s);        
        }
    }



    });

【讨论】：

【解决方案3】：

这甚至不是有效的 html，Chrome 会在选择之外呈现输入。

将输入放在选择之外。

<select>
  <option>Select</option>
  <input type="text">
</select>

【讨论】：

【解决方案4】：

如安德里安所说，选择中的输入不是有效的html。您必须创建一个带有输入的自定义下拉菜单，而不是使用默认的选择，而是使用像 ul、li 这样的元素。

【讨论】：