将输入字段数据保存在选择选项值中答案

【问题标题】：Take input field data to save in select option value将输入字段数据保存在选择选项值中
【发布时间】：2017-02-18 08:19:25
【问题描述】：

我有这个具有不同值的下拉列表。我想要做的是每当我选择其他选项时，隐藏的 div id=othertype 显示，我将在输入字段中输入并希望保存该数据但它不起作用。我知道我不能两次使用相同的名称属性，但我不希望单独的列仅用于其他输入。是否可以将输入值与选项保存在同一列中？我想要输入字段的值，而不是我在其他选项中传递的值，它本身就是其他选项。

<div class="form-group">
    <div class="col-sm-12">
    <label for="p_type">Type*:</label>
    <select class="form-control" name="qp_type" id="p_type" required>
        <option  value="Css">CSS</option>
        <option  value="HTML">HTML</option>
        <option  value="PhP">PhP</option>
        <option  value="Other">Other</option>
    </select>
    </div>
</div>

<div class="form-group" id="otherType" style="display:none;">
    <div class="col-sm-12">
        <label for="pType">If you chose ‘Other’, please describe below:</label>
        <input id="pType" type="text">
    </div>
</div>

脚本

$('#p_type').on('change',function(){
    if( $(this).val()==="Other"){
    $("#otherType").show()
    }
    else{
    $("#otherType").hide()
    }
});

【问题讨论】：

除了检查它是否为“其他”之外，您是否还在使用选项的value 属性？您可以为此使用.text() 而不是.val() 并将pType 的值存储在您选项的value 中（或者您可以将其存储为data- 属性，但......可能是错误的形式）
我认为您应该为此数据创建单独的列，因为它是不同的类型，并且您应该将用户选择选项“其他”的数据库信息放入数据库信息中。当然，您可以将这些数据放入同一个数据库列，但 IMO 不正确。
我确实使用了 text() 但不知何故它不起作用。是的，我有同样的方法，但无法找到如何做的例子。
@kris_IV 您假设“列”指的是数据库列。您可能很容易是正确的，但是问题中没有其他内容可以验证该假设。
谢谢 Kris_IV .. 是的，那将是最后的选择。他说得对，我说的是 db 列，但是当已经有一个列时，要保存并显示结果，我认为这不是用其他列填充 db 的好方法

标签： javascript php jquery html

【解决方案1】：

看起来您正在尝试使用文本字段的输入或下拉列表中的值。您可以只启用或禁用一个字段。名称可以相同，这不是问题。

<div class="form-group">
    <div class="col-sm-12">
    <label for="p_type">Type*:</label>
    <select class="form-control" name="qp_type" id="p_type" required>
        <option  value="Css" selected>CSS</option>
        <option  value="HTML">HTML</option>
        <option  value="PhP">PhP</option>
        <option  value="Other">Other</option>
    </select>
    </div>
</div>

<div class="form-group" id="otherType" style="display:none;">
    <div class="col-sm-12">
        <label for="pType">If you chose 'Other', please describe below:</label>
        <!-- START OFF WITH THIS ONE DISABLED, NAME IT THE SAME AS ABOVE --->
        <input id="pType" type="text" name="qp_type" disabled>
    </div>
</div>

<script>
$(document).ready(function(){
    $('select[name=qp_type]').change(function(){
        if($(this).val() == 'Other') {
            $('#otherType').show();
            $('#pType').prop('disabled',false);
        }
        else {
            $('#otherType').hide();
            $('#pType').prop('disabled',true);
        }
    });
});
</script>

【讨论】：

非常感谢拉斯克拉特。有效。再次感谢冠军。

【解决方案2】：

这会将所选选项的值更改为输入字段中的值。

function init() {
	$('#p_type').on('change',function(){
		if( $("option:selected", this).text()==="Other"){
		$("#otherType").show()
		}
		else{
		$("#otherType").hide()
		}
	});

	$('#pType').on('change',function(){
		// selector should be '#p_type option[text="Other"]', but it's returning an empty array
		$('#p_type option:selected').val( $(this).val() )
		console.log( $('#p_type').val() );
	} );
}

$(init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<body>
<div class="form-group">
    <div class="col-sm-12">
    <label for="p_type">Type*:</label>
    <select class="form-control" name="qp_type" id="p_type" required>
        <option  value="Css">CSS</option>
        <option  value="HTML">HTML</option>
        <option  value="PhP">PhP</option>
        <option  value="Other">Other</option>
    </select>
    </div>
</div>

<div class="form-group" id="otherType" style="display:none;">
    <div class="col-sm-12">
        <label for="pType">If you chose ‘Other’, please describe below:</label>
        <input id="pType" type="text">
    </div>
</div>
</body>

【讨论】：