How to find parent optgroup to selected option - javascript

I have the following selection box (multiple selection) in HTML.
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>
And the following JS file
$("#dhsSelect").change(function() {
// if any item in the top optgroup (id='top') is being selected, do something
// if any item in the second optgroup (id='bottom') is bring selected, do something
});
I am trying to work on the if condition. Any help would be appreciated.

You mean something like this?
Change map to forEach and return to your function and remove the console log - I’m just giving you the tools, the lack of details in your question results in lack of details in my answer
$("#dhsSelect").on("change", function() {
console.log(
$("option", this).map(function() {
if (this.selected) return this.value + " " + this.closest("optgroup").id
}).get()
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count" title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>

Here is an easy way:
$(function(){ // load
var dhsSelect = $('#dhsSelect');
dhsSelect.on('change', function(){
console.clear(); // remove upon deployment
dhsSelect.find(':selected').each(function(){
var p = $(this).parent();
// just showing we got the correct parent
console.log(p.attr('id'))
});
});
}); // end load
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>

Related

If select option value matches text in separate div, add disabled field

I'm using a select field on my site which reloads the page and then adds this to value to a separate div. I want to be able to disable this option if any of the divs have the same value as the option.
<select id="bayname" name="bayname">
<option value="">--Select Bay--</option>
<option value="1">Bay 1</option>
<option value="2">Bay 2</option>
<option value="3">Bay 3</option>
<option value="4">Bay 4</option>
<option value="5">Bay 5</option>
<option value="6">Bay 6</option>
<option value="7">Bay 7</option>
<option value="8">Bay 8</option>
<option value="9">Bay 9</option>
<option value="10">Bay 10</option>
<option value="11">Bay 11</option>
<option value="12">Bay 12</option>
<option value="13">Bay 13</option>
<option value="14">Bay 14</option>
<option value="15">Bay 15</option>
<option value="16">Bay 16</option>
<option value="17">Bay 17</option>
<option value="18">Bay 18</option>
<option value="19">Bay 19</option>
<option value="20">Bay 20</option>
<option value="21">Bay 21</option>
<option value="22">Bay 22</option>
<option value="23">Bay 23</option>
<option value="24">Bay 24</option>
<option value="25">Bay 25</option>
<option value="26">Bay 26</option>
<option value="27">Bay 27</option>
<option value="28">Bay 28</option>
<option value="29">Bay 29</option>
<option value="30">Bay 30</option>
</select>
For example if a user clicks on 'Bay 1' a div will be created like this:
<li id="1509013949" class="cart-select cart-mode-cart">
1
</li>
And then when the page reloads again, i want to create an if statement so if the value from the select is within one of the divs then it should add it as disabled.
I've had ago at doing this using the code below and i can't get it to print out in the console log.
var baynumberoption = $("#bayname option").val();
var baynumber = $(".cart-select a[href='#select']").text();
if (baynumber.indexOf(baynumberoption) >= 0) {
console.log("match found");
}
$("#bayname option") returns all of the options so I think you really want to use the following. Note if you don't want to rely on the inner text of the link, you can also add data attribute like data-id="1" to store the value which can be used like:
$("#bayname option").each(function() {
var val = $(this).val();
if ( $(".cart-select a[data-id=" + val + "]").length > 0 ) {
$(this).attr("disabled", "disabled");
}
});
Some of the syntax may be off but you get the idea.

Hiding the currently selected option

I am surrently having an issue using JQuery. I have 2 select fields.
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
And here is my JavaScript code
<script type="text/javascript">
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_"+curval).show(0);
$("#cat").change(function(){
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if($(".cat_"+cat).length == 0){$(".cat_0").show(0);}
else{$(".cat_"+cat).show(0);}
});
</script>
Here is the problem. When I change the value of the cats select, the options for the subcats are changed correctly. However, the currently selected field is still showing (Even if it doesn't correspond to the current cat).
Any help would be greatly appreciated.
You should change your code a little bit so on the hange event it can add the selected attribute to the first element in the available options :)
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_" + curval).show(0);
$("#cat").change(function() {
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if ($(".cat_" + cat).length == 0) {
$(".cat_0").attr("selected", "selected").show(0);
} else {
$(".cat_" + cat).eq(0).attr("selected", "selected");
$(".cat_" + cat).show(0);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>

How to select selected value from multiple option using javascript

I have multiple select topion.
And I need to show the selected values.with the data of '2,4,5;
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Can I use this code to get what I need.
<script type="javascript">
$(document).ready(function() {
var val_to_select = '2,4,5';
$( '#testID' ).val( val_to_select );
)};
</script>
I need output to be like this
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2" selected>test Value2</option>
<option value="3">test Value3</option>
<option value="4" selected>test Value4</option>
<option value="5" selected>test Value5</option>
<option value="6">test Value6</option>
</select>
you can pass the value in an array like this
$("#testID").val([1,2,3]);
JsFiddle
You can use this:
var data="1,2,4";
//Make an array
var dataarray=data.split(",");
// Set the value
$("#testID").val(dataarray);
// Then refresh
$("#testID").multiselect("refresh");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Also your code is not javascript but jquery.

How do you sort all selectboxes on a page alphabetically that has optgroup's without moving the options out of their respective groups?

I need help with a dilemma. I have no idea how to solve this problem. I need to sort all select boxes on a webpage alphabetically (a, b, c, d,...) by option groups (<optgroup>), then sort the options in each option group alphabetically, without taking them out of their respective group.
I need this to happen by calling the selectbox's ID, after it is loaded. Preferably, in pure JavaScript, but if that's not possible, JQuery can be used instead.
Can you handle this? If so, please help steer me in the right direction.
Thanks in Advance!
-James A.
The concept is the same as what I referenced in my comment above. See the function orderOptgroups below:
$(document).ready(function() {
orderOptgroups();
});
function orderOptgroups() {
$("select").each(function() {
var $select = $(this);
var $groups = $select.find("optgroup");
$groups.remove();
$groups = $groups.sort(function(g1, g2) {
return g1.label.localeCompare(g2.label);
});
$select.append($groups);
$groups.each(function() {
var $group = $(this);
var options = $group.find("option");
options.remove();
options = options.sort(function(a, b) {
return a.innerHTML.localeCompare(b.innerHTML);
});
$group.append(options);
});
});
}
select {
width:100px;
height:250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple">
<optgroup label="Group 2">
<option value="value11">Label C</option>
<option value="value21">Label A</option>
<option value="value31">Label B</option>
</optgroup>
<optgroup label="Group 3">
<option value="value12">Label F</option>
<option value="value22">Label D</option>
<option value="value32">Label E</option>
</optgroup>
<optgroup label="Group 1">
<option value="value13">Label X</option>
<option value="value23">Label Y</option>
<option value="value33">Label Z</option>
</optgroup>
</select>
<select multiple="multiple">
<optgroup label="Group C">
<option value="value11">Label 9</option>
<option value="value21">Label 8</option>
<option value="value31">Label 7</option>
</optgroup>
<optgroup label="Group B">
<option value="value12">Label 5</option>
<option value="value22">Label 6</option>
<option value="value32">Label 4</option>
</optgroup>
<optgroup label="Group A">
<option value="value13">Label 3</option>
<option value="value23">Label 1</option>
<option value="value33">Label 2</option>
</optgroup>
</select>

Multiple id selectors

I have a form with 2 drop down lists on the same page using the same ids.
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
Not sure how to I change the JavaScript code so the second county drop down list functions same as the first one. The existing javascript and how it functions can be seen here:
http://jsfiddle.net/pfYEb/10/
You'll probably want to use class="country" instead of id="country" so that your selector will match both. (same for your id="county") In your jsfiddle, you'll also need to distinguish which county to change within your country change event. One easy way to do this is to use the index of the current element.
I've forked your jsfiddle here.
HTML
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
​
Relevant Javascript:
$('.country').change(function() {
var country = $(this).val(),
county = $('.county').eq($(".country").index(this)); // This matches the county
// Empty county dropdown
county.empty();
// Update dropdown with appropriate contents
if (country === '') {
county.append('<option value="">Select a country first...</option>');
} else {
$.each(counties[country], function(i, v) {
county.append('<option value="' + i + '">' + v + '</option>');
});
}
});
You can't really solve this querying by id. Element ID's have to be unique within a document by specification by the way. Your best shot, use classes instead.

Categories

Resources