How to make option select selected by jquery

How to make option select selected by jquery - javascript

Here is my HTML.
<select class="height_selected" id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>
I want to make the Option 2 i.e., 125 cm as selected.
I tried
$('#1 :selected').text();
But it is not working.
How can i make the option 125 selected i.e., value that have #1 as selected
Update i have another option select
I want to make only the height to be selected.
<select class="weight_selected" id="renderWeight">
<option>Select Weight</option>
<option value="1">100 kg</option>
<option value="2">125 kg</option>
</select>

Use prop to select the option.
$('#renderHeight option[value="2"]').prop('selected', true);
Code Demo
$('option[value="2"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select class="height_selected" id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>
You can also set the value using val().
$('#renderHeight').val(2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select class="height_selected" id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>

Try this : To make option selected, you can directly set value of select box to the value of option to be selected.
$(function(){
$('#renderWeight').val('2');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="weight_selected" id="renderWeight">
<option>Select Weight</option>
<option value="1">100 kg</option>
<option value="2">125 kg</option>
</select>

You can use val() by passing the option value
Live Demo
$('#renderHeight').val(2);

You can try this code
$('#renderHeight option').each(function(){
if($(this).text() =='123 cm'){
$(this).prop('selected',true)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="height_selected" id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>

Related

page load select dropdown box option automatically

<select name="optionSnoInput" class="chosen-select" onchange="goodsViewController.option_price_display(this);">
<option value="">option</option>
<option value="104">A</option>
<option value="105">B</option>
<option value="106">C</option>
<option value="107">D</option>
<option value="108">count</option>
</select>
On the above dropdown,
I want last option 'count' is automatically selected
because I need counting each product's selling Quantity
but my shop program is counting Quantity as option not product
so I add 'count' option, and use 'display:none' css code..
Please suggest!
Thanks.

You can do it with JQuery this way to:
$(window).on('load', function(){
$('.chosen-select option:last-child').attr('selected','selected');
})
$(window).on('load', function(){
$('.chosen-select option:last-child').attr('selected','selected');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="optionSnoInput" class="chosen-select" onchange="goodsViewController.option_price_display(this);">
<option value="">option</option>
<option value="104">A</option>
<option value="105">B</option>
<option value="106">C</option>
<option value="107">D</option>
<option value="108">count</option>
</select>

Use selected for the default option.
<option value="108" selected>count</option>

How can i remove option selection without value?

I'm facing issues trying to remove the option or hide the first option value from a ransack code.
Could you please help me to face this issue?
I have this HTML CODE
<select id="q_c_0_a_0_name">
<option value></option>
<option value="lastanem1">First Lastname</option>
<option value="lastname2">Second Lastname</option>
...
<option value="xxxxxxxxx">Other value</option>
</select>
I'm trying to remove option or hide the first option because Ransack gem is generating the following HTML code:
<select id="q_c_0_a_0_name">
<option value="name"> Filter by Name</option>
<option value="lastanem1">Filter by First Lastname</option>
<option value="lastname2">Filter by Second Lastname</option>
...
<option value="xxxxxxxxx">Filter by Other value</option>
</select>
I tried this JQuery code:
$(function(){
$("#q_c_0_a_0_name option[value=]").style.display = "none";
});
Also tried this JQuery code:
$(function(){
$("#q_c_0_a_0_name option[value=""]").style.display = "none";
});

Using :first / :first-child
$("#q_c_0_a_0_name option:first").remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="q_c_0_a_0_name">
<option value></option>
<option value="lastanem1">First Lastname</option>
<option value="lastname2">Second Lastname</option>
<option value="xxxxxxxxx">Other value</option>
</select>

You can remove first option as below, whatever value it contain.
$("#q_c_0_a_0_name").find("option").eq(0).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="q_c_0_a_0_name">
<option value="name"> Filter by Name</option>
<option value="lastanem1">Filter by First Lastname</option>
<option value="lastname2">Filter by Second Lastname</option>
...
<option value="xxxxxxxxx">Filter by Other value</option>
</select>

Try this code
$("#q_c_0_a_0_name option[value='name']").remove();

Remove last option value from multiple select element using jQuery

I have two select element and I need to remove last option from both select using jQuery.
First Select Element
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
jQuery
$(".selBooks option:last").remove();
When I try this it only removes last option of second select element. Please guide me if I am doing anything wrong or there is other way to achieve this.

iterate .selBooks with loop and remove the last element of that class.
$('.selBooks').each(function() {
$(this).find("option:last").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
jQuery

Try by name
$(".selBooks[name=select1] option:last").remove();
$(".selBooks[name=select2] option:last").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>

Use last-child.
$('.selBooks option:last-child').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1">
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
<select class="selBooks" name="select2">
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>

Mutually exclusive select boxes

I have 2 select boxes. On change of one select box, I want the other select box to be defaulted to Select a value, ie val()==0, and vice versa. Only one select box should have a value selected at a time. How do I do this? I tried the code below but it does not work.
$("#select_one").change(function() {
if ('#select_two'.val() != 0) {
$('#select_two').val(0);
}
});

The simplest way to do this would be to place a common class on both the select. You can then select that class in jQuery and use not() to exclude the current element before resetting the value, something like this:
$('.select').change(function() {
$('.select').not(this).val(0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-one" class="select">
<option value="0">Please select</option>
<option>Foo</option>
<option>Bar</option>
<option>Fizz</option>
<option>Buzz</option>
</select>
<select id="select-two" class="select">
<option value="0">Please select</option>
<option>Foo</option>
<option>Bar</option>
<option>Fizz</option>
<option>Buzz</option>
</select>

You may set the selectedIndex to 0:
$('select[id^="select_"]').on('change', function(e) {
$('select[id^="select_"]').not(this).prop('selectedIndex', 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_one">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="mercedes">3</option>
<option value="audi">4</option>
</select>
<select id="select_two">
<option value="volvo">11</option>
<option value="saab">22</option>
<option value="mercedes">33</option>
<option value="audi">44</option>
</select>

That could be done using two simple change events, like the following example.
Else if you want to use one event you could use a common class as #Rory McCrossan answer shows..
Hope this helps.
$("#select_one").change(function() {
$('#select_two').val(0)
});
$("#select_two").change(function() {
$('#select_one').val(0)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_one">
<option value="0">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<select id="select_two">
<option value="0">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

Don't show part of pull downs content?

I have some dropdowns in a form that are generated by a backoffice. At the end of each choice in the dropdown something is added between (brackets). How can I not show these brackets and their variable content? Leaving only the content before the brackets.
<select>
<option value="volvo">Volvo (30.000)</option>
<option value="saab">Saab (40.000)</option>
<option value="opel">Opel (15.000)</option>
<option value="audi">Audi (45.000)</option>
</select>
<select>
<option value="dog">Dog (300)</option>
<option value="cat">Cat (50)</option>
<option value="fish">Fish (5)</option>
</select>

Try this;
var carList=[{name:"Audi (45.000)" },{name:"Saab (40.000)"},{name:"Opel (15.000)"},{name:"Audi (45.000)"}];
var $cars=$("#cars");
$cars.empty();
carList.forEach(function(index){
$cars.append(new Option(index.name.split("(")[0].trim()))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cars">
</select>
For all select elements
$("select").each(function(){
var $wrapper=$(this);
var $options=$wrapper.find("option");
$wrapper.empty();
$options.each(function(index){
$wrapper.append(new Option($(this).text().split("(")[0].trim()))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select>
<option>Fiat (32.00)</option>
<option>Audi (12.00)</option>
</select>
<select>
<option>Bmw (32.00)</option>
<option>Tofas (22.00)</option>
</select>
<select>
<option>Dog (1.00)</option>
<option>Fish (0.00)</option>
</select>

Develop Reference

JavaScript is the programming language of the Web.

How to make option select selected by jquery - javascript

You can use val() by passing the option value Live Demo $('#renderHeight').val(2);

Related

page load select dropdown box option automatically

How can i remove option selection without value?

Remove last option value from multiple select element using jQuery

Mutually exclusive select boxes

Don't show part of pull downs content?

Categories

Resources