以多重选择为条件,仅适用于某些选项

时间:2019-04-08 18:38:14

标签: javascript jquery if-statement

我有一个多选功能,需要根据第一个选择中选择的选项显示/隐藏另一个选择。有3个选项应引起另一个选择的出现-所有其他选项不应引起任何更改。

如果逐个选择选项,则可以正常工作。但是,如果同时选择了其中一个选项,则该选项将无效。

由于CMS约束,我无法将类添加到选项中。

这是我当前的jQuery代码。

$('#freeform_how_would_you_best_describe_your_companys_research_activity').change(function() {

            var selectedItems

            if ($(this).val() == 'Drug Discovery/Development' || $(this).val() == 'Therapeutics' || $(this).val() == 'Vaccines' ) {
                $('label[for="freeform_tell_us_more_about_your_research_activity"], select#freeform_tell_us_more_about_your_research_activity').slideDown();
            } else {
                $('label[for="freeform_tell_us_more_about_your_research_activity"], select#freeform_tell_us_more_about_your_research_activity').slideUp();
            }
        });

请告知

2 个答案:

答案 0 :(得分:0)

Multiselect .val()返回 array 而不是单个值。考虑到它。

$('#sel').change(function() {
  var arr = $(this).val();
  if (arr.indexOf('one') > -1 || arr.indexOf('two') > -1 || arr.indexOf('three') > -1) {
    console.log('do this');
  } else
    console.log('do that');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel" multiple size="5">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>else</option>
</select>

答案 1 :(得分:0)

一些额外的谷歌搜索和实验,后来我找到了解决方法

        $('#freeform_how_would_you_best_describe_your_companys_research_activity').change(function() {

            var values = $(this).val();
            console.log(values)

            if(values.includes("Vaccines")|| values.includes("Therapeutics") || values.includes("Drug Discovery/Development")){
                $('label[for="freeform_tell_us_more_about_your_research_activity"], select#freeform_tell_us_more_about_your_research_activity').slideDown();
            } else {
               $('label[for="freeform_tell_us_more_about_your_research_activity"], select#freeform_tell_us_more_about_your_research_activity').slideUp();
            }
        });