在下拉菜单中关闭所选值的“提交”按钮 [英] Deactivate the 'Submit' button for the selected value in dropdown menu

问题描述

我搜索了论坛，发现了该线程，但它不适合我。如果我错过了某些内容，请将它指向我。

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

我是JavaScript的吸血鬼，所以如果有人可以帮助将是非常好的。

这是我的HTML：

 < div class = optin_box> 
< h3 style =color：#fff！important;> Box标题< / h3> 
< p class =optin_text>选择您的城市：< / p> 
<表格名称=重定向> 
< select name =selection> 
< option>我的城市< / option> 
< optgroup label =区域1> 
< option value =http://domain.com>城市1< / option> 
< option value =http://domain2.com>城市2< / option> 
< option value =http://domain3.com>城市3< / option> 
< / optgroup> 
< optgroup label =区域2> 
< option value =domain4.com> City 4< / option> 
< option value =domain5.com>城市5< / option> 
< / optgroup> 
< / select> 
< br /> 
< input class =button_link hover_fade red button_widgetstyle =font-size：14px; type = button value =SUBMITonClick =WinOpen（）;> 
< / form> 
< / div> 
  

以下是我的一些javascript：

 < script language =JavaScript> 
函数WinOpen（）{
 var url = document.redirect.selection.value 
 document.location.href = url 
} 
< / script> 
  

所以我想要达到的目的是当有人在下拉菜单中看到我的城市时， SUBMIT'按钮应该被禁用。

在此先感谢您的帮助。
Kat

解决方案

以下是一些脚本，可以使用已包含的现有jQuery库在你的页面中。

 （function（$）{
 $（function（）{
 $（select [name = selection]）on（change，function（）{
 $（this）.closest（form） 
 .find（input.button_link）
 .prop（disabled，$（this）.val（）==＃）; 
}）
。 trigger（change）; 
}）; 
}）（jQuery）; 
  

注意：
假设您添加了值＃到select中的初始选项，就像您之前提到的那样。

I searched the forum and came across that thread but it didn't work for me. If there's something I missed please point me to it.

I have a dropdown in one of my websites and I'd like to deactivate the 'Submit' button when it shows the default selected value because people just click on 'Submit' and end up in 404 page.

I am a sucker for Javascript, so if someone could help would be really great.

Here's my 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>

And here's some javascript I have:

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

So what I am trying to achieve is that when someone sees 'My city' in the dropdown the 'SUBMIT' button should be deactivated.

Thanks in advance for any help. Kat

解决方案

Here's a bit of script that will do what you want, using the existing jQuery library that's already included in your page. Just include this script and it will disable the button initially and then handle the select change afterwards.

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

Note: This assumes that you added the value # to the initial option in the select, as you mentioned you had done previously.

这篇关于在下拉菜单中关闭所选值的“提交”按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！