如何检查选择选项中的所有值是否与javascript相同？

Question

if I have html like this.

<select multiple="" class="form-control" id="catalogsearch_specification2">

<option value="B-3-7">aaa</option>
<option value="B-3-7">bbb</option>
<option value="B-3-7">ccc</option>
<option value="B-3-7">ddd</option>

</select>

How to check if all value in select option are the same with javascript ?

Answer 1

Use Set object to check if each of the option elements has the same value property. If so - use Array#forEach to apply selected prop on each of them.

 let parent = document.getElementById('catalogsearch_specification2'), values = Array.from(parent.children).map(v => v.value); [...new Set(values)].length == 1 ? Array.from(parent.children).forEach(v => v.selected = true) : null; 

 <select multiple="" class="form-control" id="catalogsearch_specification2"> <option value="B-3-7">aaa</option> <option value="B-3-7">bbb</option> <option value="B-3-7">ccc</option> <option value="B-3-7">ddd</option> </select> 

Answer 2

This snippet will help you understand how to retrieve values from child nodes.

 var obj = {}; var i = 0 $("#catalogsearch_specification2 option").each(function() { //You can write you logic here. if(!obj.hasOwnProperty(this.value)) { obj[this.value] = {"value" : this.value, "duplicate" : 1}; } else { obj[this.value].duplicate = (obj[this.value].duplicate) + 1; } }); console.log(JSON.stringify(obj)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select multiple="" class="form-control" id="catalogsearch_specification2"> <option value="B-3-7">aaa</option> <option value="B-3-7">bbb</option> <option value="B-3-7">ccc</option> <option value="B-3-7">ddd</option> </select> 

Here I'm taking all the child option element of id "catalogsearch_specification2".

Answer 3

You can do:

 var isSame = true, prev = ''; $('#catalogsearch_specification2 > option').each(function() { if (prev && prev !== this.value) { isSame = false; return; } prev = this.value; }); console.log(isSame); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select multiple="" class="form-control" id="catalogsearch_specification2"> <option value="B-3-7">aaa</option> <option value="B-3-7">bbb</option> <option value="B-3-7">ccc</option> <option value="B-3-7">ddd</option> </select> 

Answer 4

There are a numerous way you can check. Here is a solution. Take the first option value and count total no of option with that value. And again count the total option value. If the count are same then all option values are same otherwise not.

 $(function(){ var firstValue = $('#catalogsearch_specification2').find("option:first-child").val(); if($('#catalogsearch_specification2 option[value="'+firstValue+'"]').length == $('#catalogsearch_specification2 option').length){ console.log("All values are same"); }else{ console.log("All values are not same"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select multiple="" class="form-control" id="catalogsearch_specification2"> <option value="B-3-7">aaa</option> <option value="B-3-7">bbb</option> <option value="B-3-7">ccc</option> <option value="B-3-1">ddd</option> </select>