停用下拉菜单中所选值的“提交”按钮

Deactivate the 'Submit' button for the selected value in dropdown menu

本文关键字：提交 按钮 下拉菜单      更新时间：2023-09-26

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

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

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

提前感谢任何帮助。凯特

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

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

注意：这假定您已将值#添加到选择中的初始选项，如前所述。

如果你使用的是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);    
    }
});

首先，指定<select>的 ID 和提交按钮：从 JS 访问它们会更容易。其次，添加更改事件侦听器以了解用户何时更改了下拉框。

<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。感谢阿切尔的建议。

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;
}
相关文章：