时间戳

首页 > 解决方案 > 当所选下拉选项的值大于 0 时，激活提交按钮

javascript - 当所选下拉选项的值大于 0 时，激活提交按钮

问题描述

如果用户从下拉菜单中选择一个选项，我试图在我的代码中显示提交按钮。我想我可以通过使用 value 属性来做到这一点。请在下面查看我的代码，我包含了一些 JavaScript，但我知道这可能是完全错误的！

<select id="button1" class="button" title="Button 1">
  <option value="0">--Please choose an option for the first blank--</option>
  <option id="buttonText1_1" class="buttonText" value="1">Arsenal</option>
  <option id="buttonText1_2" class="buttonText" value="2">Spurs</option>
  <option id="buttonText1_3" class="buttonText" value="3">Liverpool</option>
  <option id="buttonText1_4" class="buttonText" value="4">Man Utd</option>
  <option id="buttonText1_5" class="buttonText" value="5">Man City</option>
</select>
<div class="break"></div>
<select id="button2" class="button" title="Button 2">
  <option value="0">--Please choose an option for the second blank--</option>
  <option id="buttonText2_1" class="buttonText" value="1">Lampard</option>
  <option id="buttonText2_2" class="buttonText" value="2">Gerrard</option>
  <option id="buttonText2_3" class="buttonText" value="3">Scholes</option>
  <option id="buttonText2_4" class="buttonText" value="4">Viera</option>
  <option id="buttonText2_5" class="buttonText" value="5">Keane</option>
</select>

<div class="break"></div>

<button title="Submit Button" id="submitButton" class="button" onClick="submitClick()">
  <p id="submitText" class="buttonText">Submit</p>
</button>

JS：

    document.getElementById("button1").onchange = function() {
      if(this.value != 0) {
        optionVal++;
      }
    }
    document.getElementById("button2").onchange = function() {
      if(this.value != 0) {
        optionVal++;
      }
    }

    function activateSub() {
      $('#submitButton').css('display', 'block');
    }

    function doSomething() {
      if(optionVal != 0) {
       activateSub();
      }
    }

我已经用这段代码制作了一个JSFiddle。提前谢谢你！

标签： javascriptjquery

解决方案

使用jQuery：

$('select').on('change', function() {
    // shows the button if even one select has selected option
    $btn = $('#submitButton');
    $btn.hide();
    $('select').each(function() {
        if ($(this).val() != 0) {
            $btn.show();
            return false;
        }
    });
 });

我已经分叉了你的小提琴

推荐阅读