`<select>`标签

Question

我有两个选择下拉菜单和一个按钮。我希望在除了一个选项之外没有选择第二个选项的情况下禁用该按钮。

当我选择第一个选项时，第二个字段将出现，除了一个选项，该选项只有一个选择元素，因此该按钮必须是可单击的。

// linking values to dropdowns
var placesLists = {
  'uiteten': '#uiteten',
  'snackensnoepen': '#snackensnoepen',
  'drankje': '#drankje',
  'evenement': '#evenement',
  'stappen': '#stappen',
  'cultuur': '#cultuur',
  'sightseeing': '#sightseeing',
  'kids': '#kids',
  'informatie': '#informatie',
};

$('select[name=watwiljedoen]').change(function() {
  //hide all extra lists
  $('.hide').hide().prop("disabled", true);
  $('#disabledselect').hide();

  //get current value
  var value = $(this).val();

  //if there is a list for this value, show it
  if (value in placesLists) {
    $(placesLists[value]).show().prop("disabled", false);
    $(placesLists[value]).removeClass('dropdownwwjdnonactive');
    $(placesLists[value]).addClass('dropdownwwjd');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
      <select class="dropdownwwjd" name="watwiljedoen">
        <option value="lorem" disabled selected>Wat wil je gaan doen?</option>
        <option value="shoppen">Shoppen</option>
        <option value="uiteten">Uit eten</option>
        <option value="snackensnoepen">Snacken / snoepen</option>
        <option value="drankje">Drankje doen</option>
        <option value="evenement">Evenementen bezoeken</option>
        <option value="stappen">Stappen</option>
        <option value="cultuur">Cultuur snuiven</option>
        <option value="sightseeing">Sightseeing</option>
        <option value="kids">Kids</option>
        <option value="informatie">Meer informatie</option>
      </select>
      <select id="disabledselect" class="dropdownwwjdnonactive" disabled>
        <option value="sdgsdg">Verfijn je keuze</option>
      </select>
      <select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="ontbijt">Ontbijt</option>
        <option value="lunch">Lunch</option>
        <option value="diner">Diner</option>
        <option value="vis">Vis</option>
        <option value="vlees">Vlees</option>
        <option value="broodje">Broodje</option>
        <option value="patatje">Patatje</option>
        <option value="tapas">Tapas</option>
        <option value="hamburger">Hamburger</option>
        <option value="grieks">Grieks</option>
        <option value="pizza">Pizza</option>
        <option value="pasta">Pasta</option>
        <option value="traiteur">Traiteur</option>
      </select>
      <select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="snelle snack">Snelle snack</option>
        <option value="snoepen">Snoepen</option>
        <option value="IJsje">IJsje</option>
        <option value="kroketje">Kroketje</option>
        <option value="brammetje">Brammetje</option>
      </select>
      <select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="iets fris">Iets fris</option>
        <option value="thee">Thee</option>
        <option value="koffie">Koffie</option>
        <option value="biertje">Biertje</option>
        <option value="wijntje">Wijntje</option>
        <option value="whiskey">Whiskey</option>
        <option value="cocktail">Cocktail</option>
        <option value="slush">Slush</option>
      </select>
      <select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="in het stadscentrum">In het stadscentrum</option>
        <option value="evenement">Evenement</option>
        <option value="braderie">Braderie</option>
        <option value="rondje dorp">Rondje dorp</option>
      </select>
      <select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="eten">Eten</option>
        <option value="drinken">Drinken</option>
        <option value="theater">Theater</option>
        <option value="danser">Dansen</option>
        <option value="muziek">Muziek</option>
      </select>
      <select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="kunst">Kunst</option>
        <option value="stadscentrum historie">Stadscentrum historie</option>
        <option value="buitenlandse restaurants">Buitenlandse restaurants</option>
        <option value="cultuur">Cultuur</option>
        <option value="schilderen">Schilderen</option>
        <option value="kunst uitleen">Kunst uitleen</option>
        <option value="uitleen">Uitleen</option>
        <option value="galerie">Galerie</option>
        <option value="workshops">Workshops</option>
      </select>
      <select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="architectuur bekijken">Architectuur bekijken</option>
        <option value="de boekenberg">De Boekenberg</option>
        <option value="theater de stoep">Theater de Stoep</option>
        <option value="voorstraat">Voorstraat</option>
        <option value="museum winkel">Museum winkel</option>
      </select>
      <select id="kids" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="speelgoed">Speelgoed</option>
        <option value="speeltuin">Speeltuin</option>
      </select>
      <select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="parkeren">Parkeren</option>
        <option value="naar de wc">Naar de wc</option>
        <option value="plattegrond bekijken">Plattegrond bekijken</option>
        <option value="koopzondagen">Koopzondagen</option>
        <option value="toezicht en beveiliging">Toezicht en beveiliging</option>
      </select>
      <br>
      <input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten">
      <!-- <button type="button"  name="button">Bekijk resultaten</button> -->
    </form>

我尝试从一开始就禁用该按钮，并在更改时启用它，但这不起作用，因为选择了shoppen时，代码将停止工作。

shoppen也是需要始终启用按钮的选项。

我该如何解决？

Answer 1

如果我理解正确，则应始终禁用“提交”按钮，并且仅在以下情况下可用：

在第一个下拉菜单中选择“购物”时
在其他下拉菜单中选择了与默认选项不同的选项

您可以做的一件事是，在更改第一个select值时，自动禁用该按钮，并且仅在该选择的值为shoppen时才启用它。

  // hide the button by default on change
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  // only enable it if the selected option is shoppen
  if (value === "shoppen") {
    $button.prop("disabled", false);
  }

另外，当其他select都在以下条件下显示时，您将第一个选项（无法选择且无效）标记为选中。这样，如果用户选择和选择，然后又回到另一个并返回到相同的逻辑，就会执行该逻辑：

// move to the first disabled option to force selection
$(placesLists[value]).find("option:first-child()").prop("selected", true);

最后，为所有不是第一个/主要的select添加一个更改事件处理程序，如果所选选项不为空（第一个），则启用按钮：

// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
  //get current value
  var value = $(this).val();

  // disable the button by default
  var $button = $("[type=submit]");
  $button.prop("disabled", true);

  // enable the button if the value is not null
  if (value != null) {
    $button.prop("disabled", false);
  }
});

默认情况下，使用disabled属性禁用该按钮。

这是具有这三个更改的代码：

// linking values to dropdowns
var placesLists = {
  'uiteten': '#uiteten',
  'snackensnoepen': '#snackensnoepen',
  'drankje': '#drankje',
  'evenement': '#evenement',
  'stappen': '#stappen',
  'cultuur': '#cultuur',
  'sightseeing': '#sightseeing',
  'kids': '#kids',
  'informatie': '#informatie',
};

$('select[name=watwiljedoen]').change(function() {
  //hide all extra lists
  $('.hide').hide().prop("disabled", true);
  $('#disabledselect').hide();

  //get current value
  var value = $(this).val();
  
  // hide the button by default on change
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  // only enable it if the selected option is shoppen
  if (value === "shoppen") {
    $button.prop("disabled", false);
  }
  
  //if there is a list for this value, show it
  if (value in placesLists) {
    $(placesLists[value]).show().prop("disabled", false);
    $(placesLists[value]).removeClass('dropdownwwjdnonactive');
    $(placesLists[value]).addClass('dropdownwwjd');
    $(placesLists[value]).find("option:first-child()").prop("selected", true); // move to the first disabled option to force selection
  }
});

// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
  //get current value
  var value = $(this).val();
  
  // disable the button by default
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  
  // enable the button if the value is not null
  if (value != null) {
    $button.prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
      <select class="dropdownwwjd" name="watwiljedoen">
        <option value="lorem" disabled selected>Wat wil je gaan doen?</option>
        <option value="shoppen">Shoppen</option>
        <option value="uiteten">Uit eten</option>
        <option value="snackensnoepen">Snacken / snoepen</option>
        <option value="drankje">Drankje doen</option>
        <option value="evenement">Evenementen bezoeken</option>
        <option value="stappen">Stappen</option>
        <option value="cultuur">Cultuur snuiven</option>
        <option value="sightseeing">Sightseeing</option>
        <option value="kids">Kids</option>
        <option value="informatie">Meer informatie</option>
      </select>
      <select id="disabledselect" class="dropdownwwjdnonactive" disabled>
        <option value="sdgsdg">Verfijn je keuze</option>
      </select>
      <select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="ontbijt">Ontbijt</option>
        <option value="lunch">Lunch</option>
        <option value="diner">Diner</option>
        <option value="vis">Vis</option>
        <option value="vlees">Vlees</option>
        <option value="broodje">Broodje</option>
        <option value="patatje">Patatje</option>
        <option value="tapas">Tapas</option>
        <option value="hamburger">Hamburger</option>
        <option value="grieks">Grieks</option>
        <option value="pizza">Pizza</option>
        <option value="pasta">Pasta</option>
        <option value="traiteur">Traiteur</option>
      </select>
      <select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="snelle snack">Snelle snack</option>
        <option value="snoepen">Snoepen</option>
        <option value="IJsje">IJsje</option>
        <option value="kroketje">Kroketje</option>
        <option value="brammetje">Brammetje</option>
      </select>
      <select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="iets fris">Iets fris</option>
        <option value="thee">Thee</option>
        <option value="koffie">Koffie</option>
        <option value="biertje">Biertje</option>
        <option value="wijntje">Wijntje</option>
        <option value="whiskey">Whiskey</option>
        <option value="cocktail">Cocktail</option>
        <option value="slush">Slush</option>
      </select>
      <select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="in het stadscentrum">In het stadscentrum</option>
        <option value="evenement">Evenement</option>
        <option value="braderie">Braderie</option>
        <option value="rondje dorp">Rondje dorp</option>
      </select>
      <select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="eten">Eten</option>
        <option value="drinken">Drinken</option>
        <option value="theater">Theater</option>
        <option value="danser">Dansen</option>
        <option value="muziek">Muziek</option>
      </select>
      <select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="kunst">Kunst</option>
        <option value="stadscentrum historie">Stadscentrum historie</option>
        <option value="buitenlandse restaurants">Buitenlandse restaurants</option>
        <option value="cultuur">Cultuur</option>
        <option value="schilderen">Schilderen</option>
        <option value="kunst uitleen">Kunst uitleen</option>
        <option value="uitleen">Uitleen</option>
        <option value="galerie">Galerie</option>
        <option value="workshops">Workshops</option>
      </select>
      <select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="architectuur bekijken">Architectuur bekijken</option>
        <option value="de boekenberg">De Boekenberg</option>
        <option value="theater de stoep">Theater de Stoep</option>
        <option value="voorstraat">Voorstraat</option>
        <option value="museum winkel">Museum winkel</option>
      </select>
      <select id="kids" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="speelgoed">Speelgoed</option>
        <option value="speeltuin">Speeltuin</option>
      </select>
      <select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="parkeren">Parkeren</option>
        <option value="naar de wc">Naar de wc</option>
        <option value="plattegrond bekijken">Plattegrond bekijken</option>
        <option value="koopzondagen">Koopzondagen</option>
        <option value="toezicht en beveiliging">Toezicht en beveiliging</option>
      </select>
      <br>
      <input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten" disabled>
      <!-- <button type="button"  name="button">Bekijk resultaten</button> -->
    </form>

Answer 2

`<select>`标签

更改为OP

HTML和CSS

<form>将在触发submit事件时将数据发送到实时测试服务器。
实时测试服务器的响应将发布到<iframe>。
除了select#primary和“ dummy” <select>标记外，所有<select>标记都具有.secondary，{{ 1}}和.hide。默认情况下，它们也是[name=secondary]。
[disabled]现在非常有用- CSS： .hide-使用.hide {display: none}而不是add/removeClass()方法。
每个hide/show()的第一个<option>标签已更改：
```
<select>
```
现在，重置<option value="" selected>...</option>标签所需要做的就是：
```
<select>
```

jQuery

$('select').val('');事件中注册了两种类型的<select>标签：change和$('#primary')。
当触发$('.secondary')时，所有$('#primary')都会被重置：
```
$('.secondary')
```
对象$('.secondary').addClass('hide').prop('disabled', true).val('');是不必要的。通过使用placesLists的值，可以动态确定$('#primary')选择器：
```
#ID
```
在... var category = $(this).val(); $('#' + category).removeClass('hide').prop('disabled', false).val('');上发生change事件时触发的回调函数很简单：
```
$('.secondary')
```
这可确保在尚未选择... if ($(this).val() === '') { $('.send').prop('disabled', true); } else { $('.send').prop('disabled', false); }时，input[type=submit]按钮为[disabled]。

演示

$('.secondary')

未选择选择元素中的第二个选项时，禁用按钮

2 个答案:

`<select>`标签

更改为OP

HTML和CSS

jQuery

演示

未选择选择元素中的第二个选项时，禁用按钮

2 个答案:

<select>标签

更改为OP

HTML和CSS

jQuery

演示

`<select>`标签