在下拉菜单中取消激活所选值的“提交”按钮

Question

我搜索了论坛并遇到了那个帖子，但它对我不起作用。 如果我错过了什么，请指点我。

我在其中一个网站上有一个下拉菜单，当我显示默认选择值时，我想停用“提交”按钮，因为人们只需点击“提交”并最终进入404页面。

我是Javascript的傻瓜，所以如果有人可以提供帮助真的很棒。

这是我的HTML：

<div class="optin_box">
    <h3 style="color:#fff !important;">Box Title</h3>
       <p class="optin_text">Select your city:</p>
           <form name="redirect">
           <select name="selection">
          <option>My city</option>
          <optgroup label="Area 1">
          <option value="http://domain.com">City 1</option>
          <option value="http://domain2.com">City 2</option>
          <option value="http://domain3.com">City 3</option>
          </optgroup>
          <optgroup label="Area 2">
          <option value="domain4.com">City 4</option>
          <option value="domain5.com">City 5</option>
          </optgroup>                  
        </select>
        <br/>       
        <input class="button_link hover_fade red button_widget" style="font-size:14px;" type=button value="SUBMIT" onClick="WinOpen();">
        </form>
</div>

这是我的一些JavaScript：

<script language="JavaScript">
function WinOpen() {
  var url=document.redirect.selection.value
  document.location.href=url
}
</script>

所以我想要实现的是当有人在下拉列表中看到“我的城市”时，应该停用“提交”按钮。

在此先感谢您的帮助。 吉

Answer 1

如果你使用jquery（必须包含lib）

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

为方便起见，请在下拉列表中设置ID

<select id="myselect" name="selection">

也在你的提交按钮上

<input id="mybutton" .... />

然后使用jquery检测选择的更改

$('#mysselect').change(function() {
    if($('#mysselect').val() === 'My City') {
        $('#mybutton').prop( "disabled", true);    
    }
});

Answer 2

这里有一些脚本可以使用您已经包含在页面中的现有jQuery库来执行您想要的操作。 只需包含此脚本，它将最初禁用该按钮，然后处理选择更改。

(function($) {
    $(function() {
        $("select[name=selection]").on("change", function() {
            $(this).closest("form")
                .find("input.button_link")
                .prop("disabled", $(this).val() == "#");
        })
            .trigger("change");
    });
})(jQuery);

注意：这假定您将值#添加到select中的初始选项，正如您之前提到的那样。

Answer 3

首先，为<select>和Submit按钮指定ID：从JS访问它们会更容易。 其次，添加onChange事件监听器以了解用户何时更改了丢弃框。

<select name="selection" id="mySelect" onchange="checkSelect();">
...
<input class="button_link hover_fade red button_widget" style="font-size:14px;" type=button value="SUBMIT" onClick="WinOpen();" id="mySubmit">

然后在用户更改时检查值：

function checkSelect()
{
 // Let domain5.com be wrong
   if (document.getElementById('mySelect').value == 'domain5.com'))
           document.getElementById('mySubmit').disabled = true;
   else
           document.getElementById('mySubmit').disabled = false;

}

它将是纯粹的JS。 您可以像其他人所说的那样使用jQuery。

有一种替代方法，可以将this用作发送到函数的参数。 然后你不需要解析DOM。 感谢Archer的建议。

HTML将是这样的：

<select name="selection" onchange="checkSelect(this);">

JS将改为：

function checkSelect(element)
{
 // Let domain5.com be wrong
   if (element.value == 'domain5.com')
           document.getElementById('mySubmit').disabled = true;
   else
           document.getElementById('mySubmit').disabled = false;

}