0

我搜索了论坛并遇到了该线程，但它对我不起作用。如果有什么我错过了，请指出我。

我的一个网站中有一个下拉菜单，当它显示默认选择值时，我想停用“提交”按钮，因为人们只需单击“提交”并最终进入 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>

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

提前感谢您的帮助。吉

4

3 回答 3

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);    
    }
});
于 2013-10-30T16:37:19.833 回答
1

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

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

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

于 2013-10-30T17:15:06.477 回答
0

首先，为您的和提交按钮指定 ID <select>：从 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;

}
于 2013-10-30T16:40:22.567 回答