将输入字段数据保存在选择选项值中
Take input field data to save in select option value
我有这个下拉列表不同的值。我要做的是,每当我选择其他选项,隐藏的div与id=othertype显示,我会在输入字段中键入,并希望保存该数据,但它不工作。我知道我不能两次使用相同的name属性,但我不希望单独的列用于其他输入。是否可以将输入值保存在同一列作为选项?我想要输入字段的值,而不是我在其他选项中传递的值,它是other本身。
<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()
}
});
看起来您正在尝试使用文本字段的输入或下拉菜单中的值。您可以只启用或禁用一个字段。名称可以相同,这不是问题。
<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>
这将把所选选项的值更改为输入字段中的值。
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>
相关文章:
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时,才选择选项元素