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>
Related
I don't know how to make next:
I want that when someone selects items from combobox, that item be shown in div.
What do I need to do?
<body>
<h1>VEZBA STRUKTURA</h1>
<div id="prvi"></div>
<select name="automobili" id="automobili">
<option value="1">BMW</option>
<option value="2">AUDI</option>
<option value="3">OPEL</option>
<option value="4">FERARI</option>
<option value="5">SKODA</option>
<option value="6">HJUNDAI</option>
</select>
<script>
</script>
</body>
You need to attach an event listener that executes when the value of the select changes:
automobili.addEventListener('change', function() {
prvi.innerHTML = automobili.selectedOptions[0].textContent
})
<h1>VEZBA STRUKTURA</h1>
<div id="prvi"></div>
<select name="automobili" id="automobili">
<option value="1">BMW</option>
<option value="2">AUDI</option>
<option value="3">OPEL</option>
<option value="4">FERARI</option>
<option value="5">SKODA</option>
<option value="6">HJUNDAI</option>
</select>
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>
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>
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>
I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?
bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select
<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task
Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>
you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box