在<选项>是可行的选择
Display HTML while <option> is viable selection
我有如下内容:
<select name="blah">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit"/>
我希望只有当用户选择了具有value >= 1
的选项时,提交按钮才会出现。因此,在页面加载时,它不会显示提交按钮,因为当前选择的选项没有value
,但当用户选择有效选项时,会出现提交按钮。
这是用JS/JQ可以实现的吗?
如果您不想在页面加载时显示提交按钮,请在下面添加css
input[type=submit] {display:none;}
要在值更改时显示提交按钮,请尝试以下js代码
$(function(){
$('select').change(function(){
var value = parseInt($(this).val().replace(/[^0-9-]/,""),10)
if(value >= 1)
{
$('input[type=submit]').show();
}
});
});;
工作演示
在java脚本中尝试以下代码
function isSelected() {
var value =document.getElementById("blah").selectedIndex;
if(value >='1'){
document.getElementById('btnSubmit').style.display='block';
}else{
document.getElementById('btnSubmit').style.display='none';
}
}
您的HTML
<select id="blah" onChange="isSelected();">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit" style="display:none" id="btnSubmit"/>
更改此
<input type="submit" value="Submit"/>
至
<input type="button" value="Submit" id="submit"/>
在jQuery中:
$(document).ready(function(){
$('#submit').click(function(){
if($('select[name="blah"]').val() > 1)
$('#yourform').submit();
else
alert('selected value > 1');
});
});
你的表单需要有一个id,例如,在我的情况下是yourform
DEMO
相关文章:
- Div根据<选择>菜单
- 如何更改<选择>使用angularJS从控制器获得的值
- 依赖<选择>HTML和JavaScript菜单
- 如何传递相同页面<选择>值到同一页<f: param>
- 渲染<选项值=“;foo”;选择>在服务器上
- <选择>标签不起作用
- 当我有<选择>下拉列表
- 记住<选择>重新加载页面
- <中的链接;选择>下拉选项
- 映射多个<选择>至<输入>
- <上的applyBindings();选择>正在导致我的subscribe()起火,
- 如何动态生成X数量的新<输入>基于a<选择>(Angular2内)
- 在<选择>使用angular ng选项可能使用ng init
- 如何在提交<选择>与AngularJS
- 使用动态<选择>以显示<输入类型=“;文本>
- 什么's导致我的<选择>框在选中时闪烁
- 点击<选择>元素,但不在<选项>
- 使<选择>选项”;点击“;自动地
- 如何动态修改<选择>在实体化css框架中
- Javascript:更改<选择>java脚本中的选项