I have some issue with this:
<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese">cheese</option>
</select>
Select control always when i "run" it show me as first in drop-down menu a pizza and that mean a pizza is selected by default. So, how i can change this if i want to post cheese to be a default(current active in drop-down)
This down is just a example how i want to work my select, you see down a placeholder=5 , that mean this number control will by default use a 5 and i want to do the similar thing with my select control.
<input type='number' placeholder=5 min=0 max=10 step=1>
Thank you!
You simply just put the attribute of selected on to the option you want as your default.
You can use a JavaScript function to get the value from your table and assign this value as the selected option of the drop-down. The options for a select drop-down are identified by an index starting at 0.
In the demo below, I've used buttons to call the JS function. Click on the button to change the selected option:
var sel = document.getElementsByName("whatever")[0];
function defaultOption(option) {
sel.options[option].selected = 'selected';
}
<button onClick="defaultOption(0)">pizza</button>
<button onClick="defaultOption(1)">pasta</button>
<button onClick="defaultOption(2)">sandwich</button>
<button onClick="defaultOption(3)">cheese</button>
</br>
</br>
<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese" selected>cheese</option>
</select>
Related
I have a button:
<button>
Small car
</button>
When clicked it should set the option of a dropdown to "Small car".
<select>
<option value="smallcar">Lille personbil</option>
<option value="mediumcar">Lille varevogn</option>
<option value="largecar">Mellem varevogn</option>
</select>
It seems simple, but I have no clue.
If you want to change the selected value of a select>, You need to write a JavaScript script.
To change the selected value of a select> in JavaScript:
document.getElementById('selectId').value= 0;
I want user to select a state just from this list :
<input list="states">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
but also I don't want to use <select>, i know that but I want to keep the ability to type (and search among the options) but at last, one of the options must be selected.
please help me with this. I want to use it in react
You can set the value attribute of the input with the option value you want to be selected:
<input list="states" value="Pendiente">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
I have this html code,
<select name="sup" class='form-control' required >
<option value="1">Value 1</option>
</select>
Is it possible to display text to the dropdown that is not in the options using JQuery?
More explanation,
I have only option that value is 1 with name of "Value 1".
I want to display "Value 2" with value of 2.
But if I will click the dropdown arrow, It will display only one option, the "Value 1".
Is it possible?
Maybe this code for a placeholder could help you, it will show as default value in the select, but will not be selectable, and the user will be forced by html validation to select another option (if you use HTML validation). If you don't use HTML (or other) validation, because the option is disabled, it won't be sent with the form even if it has a value.
The "Other" option will trigger a new input to have a custom response.
//Detects the change of value of the select element.
$("select[name='sup']").change(function() {
//Checks if the current value of the elemnent is "other"
if ($(this).val() == "other") {
//If so, the other input is shown
$("input[name='other-input']").show();
} else {
//else, the input is cleaned and hidden
$("input[name='other-input']").val("");
$("input[name='other-input']").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="sup" class='form-control' required>
<option value="" selected disabled>Placeholder Text</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="other">Other</option>
</select>
<input style="display: none; width: 300px;" type="text" name="other-input" placeholder="Type here your custom response">
No. What shows when the drop-down isn't open must be one of the options in the select's options. To do something else, you'd have to start playing with overlaying things on top of the select, with all the cross-browser pain that comes with it.
UPDATE: I was trying lots of different methods for doing this and none of them worked... until... I changed my dropdown menu name from (date-range) to (dateRange) removing the (-), sorry for wasting time!
I have a search form and a custom reset form button, which resets all the values in the form. I now have a dropdown menu and when the reset button is pressed, I want the first option to be selected.
This is my form:
<select name="date-range" id="date-range">
<option value="Any">Any date</option>
<option value="Today">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="1 Week">Within 1 Week</option>
<option value="1 Month">Within 1 Month</option>
<option value="3 Months">Within 3 Months</option>
<option value="6 Months">Within 6 Months</option>
<option value="1 Year">Within 1 Year</option>
</script>
... and this is my javascript function that now needs to select the first dropdown value "Any".
function resetSearchForm()
{
document.searchFrm.searchStr.value='';
document.searchFrm.vertical.checked = true;
document.searchFrm.horizontal.checked = true;
** dropdown select first **
}
What is the proper way to do this? Any help gratefully received :)
This will work:
document.getElementById('date-range').selectedIndex = 0;
Example can be found here:
http://jsfiddle.net/yPmmG/3/
No javascript required, just add the selected attribute to the first option. That's what the attribute is for.
<option selected value="Any">Any date</option>
It is recommended that all select elements have one option with the selected attribute, that way there is always one selected by default. It will be the selected option when the page first loads and if the form is reset.
I have a form containing only select fields, a submit button and a reset button.
<form id="search_form">
<select id="country">
<option value="-1">Select Country</option>
<option value="22">USA</option>
<option value="23">Germany</option>
...
</select>
<select id="regions">
<option value="-1">Select Region</option>
...
</select>
<input type="reset" value="Reset />
</form>
Each of the select fields has a default option with a value of "-1".
When a user clicks on the reset button, I want all the selects to show the option with this "-1" value as being selected.
What is the best way to do this using JQuery?
You can just make a single .val() call, like this:
$("#search_form select").val("-1");
Or the entire handler:
$("#search_form input:reset").click(function(e) {
$(this).closest("form").find("select").val("-1");
e.preventDefault();
});
You can give it a try here, though if you're just using this to default the values instead of resetting them, I'd use a button instead of a type="reset".