2つのオプションが選択されていることを確認してください。

Question

選択ドロップダウンリストの2つのオプションが選択されているので、テキストを取り込んでその中のテキストが表示されるボタンを作ります。オプションがクリックされる前にボタンがテキストで表示されますが、閉じられてオプションが選択されていれば再び表示されません。

誰かがこの質問に回答した場合は、私が何か助けになることができなかったことを教えてください。

は、ここに私のコードです：

$(document).ready(function() { 
 
    var valueFrom = $('#revenueFrom option:selected').text(); 
 
    var valueTo = $('#revenueTo option:selected').text(); 
 

 
    if ($('#revenueFrom option').data('clicked', true) && $('#revenueTo option').data('clicked', true)) { 
 
    $('#annual-revenue-button').text(""); 
 
    $('#annual-revenue-button').append(valueFrom + "To:" + valueTo + " " + "×"); 
 
    $('#annual-revenue-button').show('fast'); 
 
    }; 
 

 
}); 
 

 
$('.search-popup').click(function() { 
 
    $(this).hide('fast'); 
 
});

button{ 
 
    background-color:whitesmoke; 
 
    border-radius: 20px; 
 
    display:none; 
 
} 
 
button:hover{ 
 
    background-color:lightgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button class="search-popup btn" id="annual-revenue-button" type="button"></button> 
 

 

 
<form class="form-inline revenue"> 
 
    <div class="form-group"> 
 
    <label>Annual Revenue</label> 
 
    <select name="revenueFrom" class="form-control" id="revenueFrom"> 
 
     <option value="" selected disabled>From:</option> 
 
     <option value="0">$0</option> 
 
     <option value="1">$500,000</option> 
 
     <option value="2">$1 Million</option> 
 
     <option value="3">$2.5 Million</option> 
 
     <option value="4">$5 Million</option> 
 
    </select> 
 
    <select name="revenueTo" class="form-control to" id="revenueTo"> 
 
     <option value="" selected disabled>To:</option> 
 
     <option value="0">$0</option> 
 
     <option value="1">$500,000</option> 
 
     <option value="2">$1 Million</option> 
 
     <option value="3">$2.5 Million</option> 
 
     <option value="4">$5 Million</option> 
 
    </select> 
 
    </div> 
 
</form>

Answer 1

要素に.change()イベントリスナーを設定する必要があります。
これらのいずれかが変更された場合、それらの要素の値が空でないことを確認し、ボタンを表示します。

$(document).ready(function() { 
 

 
    $('#revenueFrom, #revenueTo').change(function(){ 
 
    if ($('#revenueFrom').val() && $('#revenueTo').val()) { 
 
     var valueFrom = $('#revenueFrom option:selected').text(); 
 
     var valueTo = $('#revenueTo option:selected').text(); 
 

 
     $('#annual-revenue-button').html("From: " + valueFrom + " To: " + valueTo + " ×").show('fast'); 
 
    }; 
 
    }); 
 

 
}); 
 

 
$('.search-popup').click(function() { 
 
    $(this).hide('fast'); 
 
});

button{ 
 
    background-color:whitesmoke; 
 
    border-radius: 20px; 
 
    display:none; 
 
} 
 
button:hover{ 
 
    background-color:lightgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button class="search-popup btn" id="annual-revenue-button" type="button"></button> 
 

 

 
<form class="form-inline revenue"> 
 
    <div class="form-group"> 
 
    <label>Annual Revenue</label> 
 
    <select name="revenueFrom" class="form-control" id="revenueFrom"> 
 
     <option value="" selected disabled>From:</option> 
 
     <option value="0">$0</option> 
 
     <option value="1">$500,000</option> 
 
     <option value="2">$1 Million</option> 
 
     <option value="3">$2.5 Million</option> 
 
     <option value="4">$5 Million</option> 
 
    </select> 
 
    <select name="revenueTo" class="form-control to" id="revenueTo"> 
 
     <option value="" selected disabled>To:</option> 
 
     <option value="0">$0</option> 
 
     <option value="1">$500,000</option> 
 
     <option value="2">$1 Million</option> 
 
     <option value="3">$2.5 Million</option> 
 
     <option value="4">$5 Million</option> 
 
    </select> 
 
    </div> 
 
</form>

Answer 2

あなたはMultipleを追加し、すべての要素を持つ配列は、フォームの送信に渡されているので、name=revenueFrom後[]を追加する必要があります。

この投稿は、また、（注）この機能

how to access multiple select array data in javascriptあなたに有用であり得る：また選択に変更を探して、新しいを追加するイベントリスナーを作成することが可能であろう

function getSelectedOptions(element) { 
    // validate element 
    if(!element || !element.options) 
     return []; //or null? 

    // return HTML5 implementation of selectedOptions instead. 
    if (element.selectedOptions) 
     return element.selectedOptions; 

    // you are here because your browser doesn't have the HTML5 selectedOptions 
    var opts = element.options; 
    var selectedOptions = []; 
    for(var i = 0; i < opts.length; i++) { 
     if(opts[i].selected) { 
      selectedOptions.push(opts[i]); 
     } 
    } 
    return selectedOptions; 
} 

あなたが必要としているものなら、選択されたデータの他のどこかの要素で、より具体的な回答が必要な場合は、質問を更新してください。