Нужно отображать пустые, если опция выбора «" хочет использовать твитер javascript

Question

У меня есть несколько выпадающих меню, в которых, если они не являются "", тогда я хочу использовать отображаемое значение вместе с добавлением \ 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

ОБНОВЛЕНО:

JS Fiddle, показывающий, как это реализовать, так что вместо того, чтобы писать отделенной линии для каждого select ввода, добавим же class ко всем из них, таким образом, мы можем упростить работу с .each() функция. мы прокручиваем каждый элемент этой группы и проверяем его значение, если 0 мы возвращаем "", иначе мы возвращаем выбранный текст варианта с использованием тернара 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>

Answer 2

Для удовлетворения потребности в тройном operatior, вы можете использовать это:

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 3

Попробуйте использовать длину.

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