I'm very very new to jQuery. I Googled a lot before I'm asking, though it looks silly but for me its complicated.
I have a simple <select> list which has around 4 values like this image shown below.
Now at runtime, I want to hide the options and show based on index or value names in jQuery. How can I achieve this?.
My drop down box has a div region and simple select option with set of values. Please provide me a simple example.
Sample code
<Div ID = "abcd">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
In this how to hide Volvo/Opel at run time?... like i want to show and hide these options dynamically.
Like Ex: When a button is pressed i want to hide Volvo. Similarly if another button is pressed i want to display Volvo back.
if you would like to hide the whole select you should give your select or the div containing your select an id and then you can do like :
<div id="mySelect" >your select tag here </div>
$('mySelect').show(); // or $('mySelect').hide();
http://api.jquery.com/hide/
http://api.jquery.com/show/
if you would like to hide the option you can do like below :
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
To be more specific to your code :
<div id="abcd">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
title = 'volvo';
$("#mySelect option[value=" + title + "]").hide();
like in this post :
Hide options in a select list using jQuery
or remove it :
JQuery: Hide options of select according to option value
Related
I have a select with options, let's call it Car Brands:
<select id="car-brands">
<option value="noselection">Car Brand</option>
<option value="toyota">TOYOTA</option>
<option value="lexus">LEXUS</option>
</select>
And I have another 2 selects, let's call them car models:
<select id="car-models-toyota" style="display:none;">
<option value="noselection">Car Model</option>
<option value="toyota">AVENSIS</option>
<option value="lexus">CAMRY</option>
</select>
<select id="car-models-lexus" style="display:none;">
<option value="noselection">Car Model</option>
<option value="toyota">AVENSIS</option>
<option value="lexus">CAMRY</option>
</select>
I hide them, so when user selecting TOYOTA or LEXUS in first select, Car Models will show up by their theme:
$('#car-brands').change(function() {
const brand = $(this).val();
$(`#car-models-${brand}`).show();
});
And it's working, car models selects show up, but I can't understand how can I hide another with this dynamic variable?
I mean I select TOYOTA and #car-models-toyota select shows up, select LEXUS and #car-models-lexus select shows up, but when it shows up toyota select should be hidden.
Can you help me, please?
You can do this by making all select elements hidden first in each first select, change event, and then shown the desired one by your provided code. So all you have to do is to select all selects (except the brand select) with $('select').not('#car-brands') then use hide() to make all of them hidden.
So this should be something like this:
$('#car-brands').change(function() {
const brand = $(this).val();
$('select').not('#car-brands').hide();
$(`#car-models-${brand}`).show();
});
Using Bootstrap 4 example html below, how can I extract the text from selected dropdown menu option with JS DOM or Jquery?
<select class="custom-select" id="inputGroupSelect01">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I know that I can fetch the value but not the text within <option></option> with something like this:
$("#inputGroupSelect01").change(function (){
alert($(this).val());
});
Let's assume the value is an ID and the text is a column in my database. I need to fetch this information to submit a PUT request with the ID and the text. Thanks for your help!
Simply add option:selected to your ID in jQuery:
$("#inputGroupSelect01").change(function (){
alert($("#inputGroupSelect01 option:selected").text())
});
There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.
You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').
DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...
If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));
I have a select box that allows the user to select a category for an article of clothing. The categories can have sub categories, so in order to display that hierarchy, I write the options like this:
Category Name
├─ Sub-category name
which looks like this:
Category Name
├─ Sub-category name
Unfortunately, when the user selects a sub-category, then the text that shows in the select box includes the structure characters. How do I only display the category name when an option is selected, but keep the structure HTML when they change options? Is there a better way to show the hierarchy of categories within the options? Optgroups don't work for me, because the user needs to be able to select the top-level categories also.
Here's what it looks like now.
http://jsfiddle.net/K6yfp/
Perhaps you are looking for optgroup
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
FIDDLE
I have come up with a simple solution but could not workout more on it. Hope you will find it helpful.
HTML
<select id="Categories">
<option value="Shoes">Shoes</option>
<option value="Sneakers"> ├─Sneakers</option>
</select>
JS
$(document).ready(function(){
var SelectedCategory = $('#Categories').find('option:selected').val();
$('#Categories').bind("change",function() {
$(this).find('option:selected').attr('label',$(this).find('option:selected').val());
SelectedCategory = $(this).find('option:selected').val();
$(this).blur();
});
$('#Categories').focus(function(e){
e.stopPropagation();
$(this).find('option:selected').removeAttr('label');
}).blur(function(e){
e.stopPropagation();
$(this).find('option:selected').attr('label',$(this).find('option:selected').val());
});
});
Note: Do not forget to include the jQuery Library.
Check the Demo Fiddle.
I am trying to select an option in a select menu that contains an optgroup. I have tried
document.getElementsByName("dob_year")[0].selectedIndex = "1980"; and it seems to work with select menus that contain no "optgroups", bit it does work with them. How can I select the "1980" option?
<select name="dob_year">
<optgroup label="Morning">
<option value="1980">80</option>
<option value="1981">81</option>
<option value="1982">82</option>
<option value="1983">83</option>
</optgroup>
</select>
As the name suggest, the selectedIndex is an index.
So you have to use the following:
document.querySelector('select').selectedIndex = 2;
Working jsfiddle: http://jsfiddle.net/vkSKy/