Question

我有类似下面的内容：

<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完成的吗？

Answer 1

如果您不想在页面加载时显示提交按钮，请在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();
        }
    });
});;

Working Demo

Answer 2

更改此

<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

Answer 3

在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"/>

在<option>是可行的选择</option>时显示HTML

3 个答案: