val("text") is not setting the option as selected - javascript

I am trying to change the value of this select using $('#mySel').val('1.5'); I have found several places that recommend doing it like this. But for some reason it doesn't seem to be working, and instead just selects the first option 0.5. Does anyone know why this would not work? Or what might work instead? Here is the code I am using.
$('#mySel').val('1.5');
$('#courseset').trigger('create');
<select name="hours" id="mySel" data-mini="true" >
<option value="0.5" >0.5</option>
<option value="1.0" >1.0</option>
<option value="1.5" >1.5</option>
<option value="2.0" >2.0</option>
<option value="2.5" >2.5</option>
<option value="3.0" >3.0</option>
<option value="3.5" >3.5</option>
<option value="4.0" >4.0</option>
<option value="4.5" >4.5</option>
<option value="5.0" >5.0</option>
<option value="5.5" >5.5</option>
<option value="6.0" >6.0</option>
<option value="6.5" >6.5</option>
<option value="7.0" >7.0</option>
<option value="7.5" >7.5</option>
<option value="8.0" >8.0</option>
<option value="8.5" >8.5</option>
<option value="9.0" >9.0</option>
<option value="9.5" >9.5</option>
<option value="10.0" >10.0</option>
<option value="10.5" >10.5</option>
<option value="11.0" >11.0</option>
<option value="11.5" >11.5</option>
<option value="12.0" >12.0</option>
</select>

This should match the option field without knowing its place in the DOM
$('#mySel option[value="1.5"]').attr('selected', 'selected');

$("#mySel option").filter(function() {
return $(this).text() == '1.5';
}).prop('selected', true);

Try use .attr("selected", "selected).
You can also use nth-child to select the option, in your case, you can try the following:
$("#mySel :nth-child(3)").attr('selected', 'selected'); //selected option value=1.5

Related

Php: modify attribute html tag

I have these html tags:
<select name="ct" id="ct">
<option value="-1">Tutte</option>
<option value="1">Da verificare</option>
<option value="2">Verificate</option>
<option value="3">Approvate</option>
<option value="4">Respinte</option>
<option value="5">Pubblicate</option>
<option value="6">Scadute</option>
<option value="7">Proposte</option>
<option value="8">Rifiutate</option>
<option value="9">Ritirate</option>
<option selected="selected" value="7,8,1">Proposte / Rifiutate / Da verificare</option>
</select>
I want to change the attribute value of the selected option (which contains "7,8,1") to value="-1", so it will look like:
<option selected="selected" value="-1">Proposte / Rifiutate / Da verificare</option>
I tried with:
$dom_richieste->getElementsByTagName('options')->getAttribute('value').value="-1";
But that's not working...
You can use $("#ct option[value='7,8,1']").val("-1");
$("#ct option[value='7,8,1']").val("-1");
console.log($("#ct").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ct" id="ct">
<option value="-1">Tutte</option>
<option value="1">Da verificare</option>
<option value="2">Verificate</option>
<option value="3">Approvate</option>
<option value="4">Respinte</option>
<option value="5">Pubblicate</option>
<option value="6">Scadute</option>
<option value="7">Proposte</option>
<option value="8">Rifiutate</option>
<option value="9">Ritirate</option>
<option selected="selected" value="7,8,1">Proposte / Rifiutate / Da verificare</option>
</select>
I suggest you to check how you created this drop down, and if possible replace there instead after creating drop down.
If I understand correctly you are need something like:
foreach ($dom->getElementsByTagName('option') as $item) {
if ($item->getAttribute('selected') == "selected")
$item->setAttribute("value", "-1");
}
This way you pass on your option items and set the value of the selected ones
You have used getElementsByTagName('options') in your code and no tag available with name options. Instead you should use correct tag name option.

Array of select field with same name and different id.

I have an array of select fields all having the same list of option value. What i am trying to get is, if a value is selected in any of the field, it should not show on the other. Below is an example code. For example, if I am having four select fields, if I select 'a' on first field, the value "a" should not appear on the next select field. Same with other values of "b", "c" and "d".
I am trying to use java script for the same. I am in learning phase. help will be really appreciated. Thanks
<select name='list' id='list_1'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='d'>d</option>
</select>
Try this code that i have written .. Hope should help
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
$(document).on('change', 'select', function() {
$(this).find('option:selected').addClass('keepit');
$('option[value="' + this.value + '"]:not( .keepit)').remove();
});
https://jsfiddle.net/av46dbo1/
Since you don't want to destroy the data, you need to hide the options.
That's tricky because you have multiple state to combine.
you can make several IF comparisons, hard-code a table of combos for each group and options (yuck), or use a mountain of JS to solve this, but i think that CSS is better.
A simple way to accomplish this is to use CSS; multiple classes on a single element that translate your many states into rules that can be applied instantly and generically (without hard-coding ids or names).
<select name='list' id='list_1'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script>
var combos=[], // store the css we need to define hide/show rules
classes= new Array($("select").length); //a place to store many states
$("select").each(function(i,e){ // for every drop down,
$(this).change(function(){ // when it changes:
classes[i]=this.value; // update array with changed value in right slot
document.body.className=classes.join(" "); // update body class with array
});
});
$("select option[value]").each(function(n, a){ // make css to hide each option if body has the same class:
combos.push( "body."+a.value+" option[value='"+a.value+"'] ");
});
//append the dynamic CSS to the head:
$("head").append("<style> "+combos+"{ display: none; }</style>");
</script>
online demo: http://pagedemos.com/pe2uf5vkx9vh/
if you want to restrict this functionality to certain drop downs, give them a class like <select class=hider and change $("select to $("select.hider in the code above.
if you have values with spaces, you'll need fancier CSS selectors than class, like data-state="|a b|hello world|honda crv|" attribs that you can delimit and hit with partial attribute selectors (body[data-state*='|hello world|']...), but the same pattern can work with many and more complex states.
Fiddle
$(function(){
$('#list_1').change(function(){
var valueToRemove=$(this).val();
$('select').not('#list_1').each(function(){
var currentId=$(this).prop('id');
$("#"+currentId+" option[value="+valueToRemove+"]").remove();
})
})
})

Check if option is selected appear an other option value

I have something like :
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
I am trying to do, if Scrammer is selected in #BadReason select 1 week in #BanLength automaticly. 
try using change event BanReason and based on this value pass the desired value to BanLength and trigger the change.:
$("#BanReason").on("change",function(){
if(this.value == "scrammer"){
$("#BanLength").val("1week").trigger("change");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
On change event will help you to do this
$("#BanReason").on("change",function(){
if($(this).val() == "scrammer")
$("#BanLength").val("1week");
});
Added a Fiddle to this
Fiddle

Select on Change will change another select html javascript or jquery

I have a select like this
<select name="category" >
<option value="0" selected>Select a Manufacturer</option>
<option value="10">Acer Technologies</option>
<option value="2">Alcatel</option>
<option value="14">Apple Iphone</option>
<option value="4">Azumi</option>
<option value="12">HTC Corporation</option>
<option value="8">Huawei</option>
<option value="5">LG Electronics</option>
<option value="11">Motorola</option>
<option value="9">Nokia Microsoft</option>
<option value="1">Samsung</option>
<option value="6">Sony Ericsson</option>
<option value="3">Zhong Xing ZTE</option>
</select>
And another select HIDDEN like this
<select name="manufacturer" >
<option value="none" selected>Select a Manufacturer</option>
<option value="Acer Technologies">Acer Technologies</option>
<option value="Alcatel">Alcatel</option>
<option value="Apple Iphone">Apple Iphone</option>
<option value="Azumi">Azumi</option>
<option value="HTC Corporation">HTC Corporation</option>
<option value="Huawei">Huawei</option>
<option value="LG Electronics">LG Electronics</option>
<option value="Motorola">Motorola</option>
<option value="Nokia Microsoft">Nokia Microsoft</option>
<option value="Samsung">Samsung</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Zhong Xing ZTE">Zhong Xing ZTE</option>
</select>
Both selects are almost the same value, the first one is to save the manufacturer as category and the second one is to save the manufacturers name
The first one is visible while the second one is hidden ( display:none )
What I need is:
If the user select in select one for example
<option value="2">Alcatel</option>
In some way the hidden display:none select must be autoselected to
<option value="Alcatel">Alcatel</option>
Any way to do this?
I already have Jquery running other functions on the site
Thanks
Use change function:
$( "select[name='category']" ).change(function(e) {
$( "select[name='manufacturer']" ).val( $(this).find( "option:selected" ).text() );
});
But if option text in category select do not match option value in manufacturer select - code will not work.

Links in <select> dropdown options

Is it possible for each dropdown options to link somewhere when selected without the need for an external button?
<select>
<option value="x">x</option>
<option value="y">y</option>
</select>
You can use the onChange property. Something like:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
Add an onchange event handler and set the pages location to the value
<select id="foo">
<option value="">Pick a site</option>
<option value="http://www.google.com">x</option>
<option value="http://www.yahoo.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
... or if you want / need to keep your option 'value' as it was, just add a new attribute:
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
Maybe this will help:
<select onchange="location = this.value;">
<option value="home.html">Home</option>
<option value="contact.html">Contact</option>
<option value="about.html">About</option>
</select>
This is an old question, I know but for 2019 peeps:
Like above if you just want to change the URL you can do this:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
But if you want it to act like an a tag and so you can do "./page", "#bottom" or "?a=567" use window.location.replace()
<select onChange="window.location.redirect(this.value)">
<option value="..">back</option>
<option value="./list">list</option>
<option value="#bottom">bottom</option>
</select>
Extending on #kevin's answer,
if someone has to perform some confirmation logic if URL is critical.
<select onChange=" this.options[this.selectedIndex].text == 'Delete' ? "Confirmation logic" : window.location.href=this.value;" >
<option selected disabled>Action</option>
<option value="/user/view">View</option>
<option value="/user/edit">Edit</option>
<option value="/user/delete">Delete</option>
</select>
You can use this code:
<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
<option value="URL">Book</option>
<option value="URL">Pen</option>
<option value="URL">Read</option>
<option value="URL">Apple</option>
</select>

Categories