Überprüfen Sie, ob zwei Optionen ausgewählt wurden

Question

Ich muss wissen, wenn zwei Optionen aus einer Auswahl Dropdown-Liste ausgewählt wurden, so kann ich den Text nehmen und eine Schaltfläche, die diesen Text darin hat, angezeigt werden. Momentan wird die Schaltfläche mit etwas Text angezeigt, bevor die Optionen angeklickt wurden, aber sie wird nicht mehr angezeigt, wenn sie geschlossen wurde und Optionen ausgewählt wurden.

Wenn jemand diese Frage beantwortet hat, lassen Sie mich bitte wissen, dass ich nichts finden konnte, um mir zu helfen.

Hier ist mein Code:

$(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

Sie müssen einen .change() Event-Listener für die Elemente select festlegen.
Wenn einer von ihnen geändert wurde, überprüfen Sie die Werte dieser select Elemente sind nicht leer, und zeigen Sie dann Ihre Schaltfläche.

$(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

Sie müssen Multiple hinzufügen und fügen Sie [] nach name=revenueFrom So ein Array mit allen Elementen auf Formular-Vorlage übergeben wird.

Dieser Beitrag auch von Nutzen how to access multiple select array data in javascript zu Ihnen sein kann

Hinweis Diese Funktion:

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; 
} 

Es wäre auch möglich sein, ein Ereignis-Listener zu machen, die auf dem ausgewählten Änderungs sucht und fügt eine neue Element woanders mit den ausgewählten Daten, wenn es das ist, was Sie brauchen, zögern Sie nicht, Ihre Frage zu aktualisieren, wenn Sie eine spezifischere Antwort benötigen.