Question

我有几个下拉菜单，用户可以选择第一个选项，然后根据选择的选项出现一个新的下拉菜单。

这两个值需要发布，但是现在所有选择下拉列表都已发布，即使是隐藏的也是如此。如何防止这种情况发生？

我的jquery：

// 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();

  //get current value
  var value = $(this).val();

  //if there is a list for this value, show it
  if (value in placesLists){
    $(placesLists[value]).show();
    $(placesLists[value]).removeClass('dropdownwwjdnonactive');
    $(placesLists[value]).addClass('dropdownwwjd');
  }
});

.hide{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form class="" action="includes/wwjd.php" 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="uiteten" class="dropdownwwjdnonactive hide" name="tag">
    <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>
  </select>
  <select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
    <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 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 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 value="eten">Eten</option>
    <option value="drinken">Drinken</option>
    <option value="theater">Theater</option>
    <option value="danser">Dansen</option>
  </select>
  <select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
    <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">Kunst</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 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 value="speelgoed">Speelgoed</option>
    <option value="speeltuin">Speeltuin</option>
  </select>
  <select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
    <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>
  <input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten">
  <!-- <button type="button"  name="button">Bekijk resultaten</button> -->
</form>

我只希望发布可见的tag，而不是全部。

Answer 1

更改

//hide all extra lists $('.hide').hide();

到

//hide all extra lists $('.hide').hide().attr('disabled','disabled);

阻止隐藏的选择字段在表单中发布

1 个答案: