Question

请勿在{{1}}和其他value="beaches"的{{1}}中显示默认文字。我想显示默认值Demo

value="chill"

value="chill"

jQuery('#preference, #style').on('change', function() {
  // set reference to select elements
  var preference = jQuery('#preference');
  var style = jQuery('#style');

  // check if user has made a selection on both dropdowns
  if (preference.prop('selectedIndex') > 0 && style.prop('selectedIndex') > 0) {
    // remove active class from current active div element
    jQuery('.result.active').removeClass('active');

    // get all result divs, and filter for matching data attributes
    jQuery('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');
  }
});

Answer 1

如果你想在div中显示文字，如果你选择海滩和寒冷，只需更新你的if：

if (preference.prop('selectedIndex') >= 0 && style.prop('selectedIndex') >= 0)

如果您想在不点击的情况下进行显示，请在[$(document).ready();][1]中调用您的功能见下文：

＆＃13;

function check() {
  // set reference to select elements
  var preference = jQuery('#preference');
  var style = jQuery('#style');

  // check if user has made a selection on both dropdowns
  if (preference.prop('selectedIndex') >= 0 && style.prop('selectedIndex') >= 0) {
    // remove active class from current active div element
    jQuery('.result.active').removeClass('active');

    // get all result divs, and filter for matching data attributes
    jQuery('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');
  }
}

$(document).ready(check);

jQuery('#preference, #style').on('change', check);

＆＃13;

.result {
  display: none;
}

.result.active {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="preference">
  <option value="beaches">beaches</option>
  <option value="museums">museums</option>
  <option value="mountains">mountains</option>
</select>
<select id="style">
  <option value="chill">chill</option>
  <option value="fast-paced">fast-paced</option>
  <option value="both">both</option>
</select>

<div class="result" data-preference="beaches" data-style="chill">beaches and chill, show text Default</div>
<div class="result" data-preference="beaches" data-style="fast-paced">beaches and fast-paced</div>
<div class="result" data-preference="beaches" data-style="both">beaches and both</div>
<div class="result" data-preference="museums" data-style="chill">museums and chill</div>
<div class="result" data-preference="museums" data-style="fast-paced">museums and fast-paced</div>
<div class="result" data-preference="museums" data-style="both">museums and both</div>
<div class="result" data-preference="mountains" data-style="chill">mountains and chill</div>
<div class="result" data-preference="mountains" data-style="fast-paced">mountains and fast-paced</div>
<div class="result" data-preference="mountains" data-style="both">mountains and both</div>

＆＃13;

或者，您可以使用相同的逻辑。为您的选择标记创建一个空选项：

<select id="preference">
  <option value=""></option>
  <option value="beaches">beaches</option>
  <option value="museums">museums</option>
  <option value="mountains">mountains</option>
</select>
<select id="style">
  <option value=""></option>
  <option value="chill">chill</option>
  <option value="fast-paced">fast-paced</option>
  <option value="both">both</option>
</select>

Answer 2

您可以附加没有默认文本值的选项，如下所示：

<select id="style">
    <option>default text</option>
    <option value="chill">chill</option>
    <option value="fast-paced">fast-paced</option>
    <option value="both">both</option>
</select>

Answer 3

你可以用这个：

<option disabled selected value> -- select an option -- </option>

实施例

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

不要在两个选择选项上显示默认文本

3 个答案: