I'm trying to set the "Seleccionar tamaño" option as default but I cant..
<select name="tamano" ng-model="pizza.initial_prize" class="form-control select">
<option ng-value="0">Seleccionar tamaño</option>
<option ng-value="pizza.fam">Familiar</option>
<option ng-value="pizza.med">Mediana</option>
<option ng-value="pizza.peq">Pequeña</option>
</select>
Can someone explain me how?
Thank you.
assign 0 in pizza.initial_prize
Controller
$scope.pizza.initial_prize=0;
in your <!-- app.js -->
$scope.pizza.initial_prize = 0;
You can also use ng-init :
<select name="tamano" ng-model="pizza.initial_prize" ng-init="pizza.initial_prize= options[0]" class="form-control">
<option ng-value="0">Seleccionar tamaño</option>
<option ng-value="pizza.fam">Familiar</option>
<option ng-value="pizza.med">Mediana</option>
<option ng-value="pizza.peq">Pequeña</option>
</select>
Use selected as follows:
<option ng-value="0" selected>Seleccionar tamaño</option>
Related
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.
<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
it by default shows orange in the box but I want Grapes in a box. Please help
Thanks
For your HTML Dropdown
<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
Using JS You can use below code to get desired result
document.getElementsByClassName("fruits")[0].selectedIndex = 2 // will select Grapes
Just assign index 0,1..to length of dropdown to get selected value
If you want to use jQuery, then do it like this
$("select.fruits").val("Grapes");
Javascript
var element = document.getElementsByClassName('fruits')[0];
element.value = valueToSelect;
HTML Code:
<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">admin</option>
<option value="Kiwi">Kiwi</option>
</select>
javascript:
$('.fruits option:eq(2)').attr('selected', 'selected');
eq(nth), you can pass index which option you want to select by default. it's start from 0 to n-1.
You can use the selector :nth-child() index starts at 1
You can use method .eq() index starts at 0
$(".fruits").find('option').eq(0).css('color', 'blue')//index starts at 0 so first option will be blue
$(".fruits").find('option:nth-child(2)').css('color', 'red');//index starts at 1 so second option will be red
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">admin</option>
<option value="Kiwi">Kiwi</option>
</select>
You can use the selectedIndex property:
$('select.fruits').prop('selectedIndex', 2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
The code above will select the third option, since the index starts from 0.
In 2023, without jQuery, the correct snippet is this:
document.getElementsByClassName("fruits").selectedIndex = 2
Search option is not working with single select although It is working with multi select.
Below is the code:
html:
<select id="select-name" placeholder="Select a person..." >
<option value="4">Thomas Edison</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
js:
$(function() {
$('#select-name').selectize();
});
This is not documented, I believe, and I find it the hard way by comparing the provided samples. You have to add an option with the value of "" to get that result.
<select id="select-name" placeholder="Select a person..." >
<option value="">Select a Person</option>
<option value="1">Person 1</option>
<option value="2">Person 2</option>
</select>
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
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>