如果 select 选项为 "" 需要显示空要使用 javascript 三进制

Question

我有几个 select 下拉菜单，如果它们不是“”，那么我想用完显示值并为新行添加一个 \n

crewMembers += $('#aa').find(":selected").text();
crewMembers += $('#bb').find(":selected").text();
crewMembers += $('#cc').find(":selected").text();
crewMembers += $('#dd').find(":selected").text();
crewMembers += $('#ee').find(":selected").text();
crewMembers += $('#ff').find(":selected").text();

所以我想用那个代码做的是

使用三元

aa ? aa + "\n" : "";

此类代码在测试中似乎不起作用

Answer 1

为了满足三元运算符的需要，您可以使用：

crewMembers += $('#aa').find(":selected").text() ?
    $('#aa').find(":selected").text() + '\n' :
    '';

但我不推荐这样做。相反，我推荐这样的东西：

crewMembers = ['aa', 'bb', 'cc', 'dd', 'ee'].map(function (a) {
    return $('#' + a).find(":selected").text();
}).filter(Boolean).join('\n');

此提案以数组及其方法为特色。

Answer 2

尝试使用长度。

aa.length > 0 ? aa + "\n" : "";

Answer 3

更新：

A JS Fiddle 展示了如何实现这个，所以我们不是为每个 select 输入单独写一行，而是将相同的 class 添加到所有输入，这样我们就可以简化使用 .each() 函数。我们循环遍历这些组的每个元素并检查其值，如果 0 我们 return "" 否则我们 return 使用 javascript 三进制的选定选项文本。

var crewMembers = '', val, data;
$('#btn').on('click', function(){
    $('.slct').each(function(){
        val = $(this).val();
        data = $(this).find(":selected").text();
        crewMembers += (val != 0) ? data + "\n" : "";    
    });
    console.log(crewMembers);
    
    //below is just a demonstration as well as the console - 
    //not part of the solution
    var html = $('#result').html() + crewMembers.replace(/\n/g,'<br>');
    $('#result').html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="aa" class="slct">
    <option value="0"></option>
    <option value="1">option 1.1</option>
    <option value="2">option 1.2</option>
    <option value="3">option 1.3</option>
    <option value="4">option 1.4</option>
</select>
<select id="bb" class="slct">
    <option value="0"></option>
    <option value="1">option 2.1</option>
    <option value="2">option 2.2</option>
</select>
<select id="aa" class="slct">
    <option value="0"></option>
    <option value="1">option 3.1</option>
    <option value="2">option 3.2</option>
    <option value="3">option 3.3</option>
</select>
<select id="dd" class="slct">
    <option value="0"></option>
    <option value="1">option 4.1</option>
    <option value="2">option 4.2</option>
    <option value="3">option 4.3</option>
    <option value="4">option 4.4</option>
</select>
<button id="btn">check</button>
<hr>
    <div id="result"><strong>Result:</strong><br></div>

如果 select 选项为 "" 需要显示空要使用 javascript 三进制

Need to display empty if select option is "" want to use a javascript ternary

javascript

jquery

ternary-operator

如果 select 选项为 "" 需要显示空 要使用 javascript 三进制

Need to display empty if select option is "" want to use a javascript ternary

javascript

jquery

ternary-operator

如果 select 选项为 "" 需要显示空要使用 javascript 三进制