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.
Related
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>
I am working with laravel and in my form I am grab data to select input using some variable,
<label for="exampleFormControlSelect1">Vehicle Category</label>
<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
#foreach($model_list as $model)
<option value="{{$categories->id}}">{{$categories->id}}</option>
#endforeach
</select>
Now I am going to hide this select input and this select input is depend to other select inputs values. So, I need select automatically drop down values to above select input using some technology. How can I do this? (currently it should select manually using drop down list)
Add selected="selected" to the first option.
<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
{{$i = 1;}}
#foreach($model_list as $model)
<option value="{{$categories->id}}" {{($i == 1) ? "selected='selected' : ''"}}>{{$categories->id}}</option>
$i++;
#endforeach
If you need to select the first option of a select, you can do it in three ways
select.options
select.values
select.selectedIndex
For example having this form that contains the select that probably rendered blade
<form name="formName">
<label>Categories</label>
<select name="c_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
You could try
const category = document.forms.formName.c_id;
console.log(category.value)
console.log(category.options[0].value)
console.log(category.options[category.options.selectedIndex].value)
This will show on the console:
'1'
'1'
'1'
Visit this link to try the example
To read more about select and some useful options visit this article in select and option section
Now, probably I misinterpret your question, in your comment you mention that this select is dependent on another, this is not clear to me, does it have any relation to the data attribute? If this is the case, please develop your question
For example, I have
<label class="form">Menu</label>
<select id="selection" name="select" required>
<option value="" selected>--Select an Option--</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
...
</select>
This would only give a a drop down menu when the user clicks on the input box with their mouse. But I want to give them the option to be able to type in the input box such as:
If the user types in option1 it would direct them to the "Option 1" drop-down menu, etc. And if the user types in any other words that are not included in the drop-down list it would show "Invalid Input".
Yes there is! A text input with a list attribute:
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Boston">
<option value="Cambridge">
</datalist>
EDIT: for the autocomplete, try Bootstrap Typeahead
I have a combo box with couple values, including a blank value.
When I select the combo box and then tab away (loose focus) my default value is replaced with the first item from the list.
I want it to stay blank if nothing has been selected.
The code looks as follows:
<select data-ng-disabled="!model.AmendEnabled" data-ng-model="model.ProTitleId" data-val="true" data-val-number="Title must be a number." data-val-required="Title is required" id="ProTitleId" name="ProTitleId" tabindex="1" class="ng-pristine ng-valid">
<option value=""></option>
<option value="1">Mr</option>
<option value="2">Ms</option>
<option value="3">Mrs.</option>
<option value="4">Miss</option>
</select>
What actually happens after the focus is moved to the other field, the option with value set to "" is removed and the one with value 1 is selected.
I have an input box
<input id="source" onchange="openDropdown(...)" >
Whenever I enter any text inside this input box a dropdown of suggestion appears. Now I want to automatically select the first suggestion using JavaScript, but can't find any way to do this.
REQUIREMENT: You need to only use input id to select the first suggestion. I don't know the onchange function.
NOTE:- I am not having any select element here.I am just having an
input element here.So the thing is that i just want to select the
first element in the dropdown which will open after we start typing in
that input box(& i don't know how this dropdown is coming.I just know
that some input box is there.)I am not having the full code.
try this code,By default I select option 3 but you can change it
function openDropdown(){
$("#lst option:first").prop("selected","selected")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="source" onchange="openDropdown()" >
<select id="lst">
<option value=1>option 1</option>
<option value=2>option 2</option>
<option value=3 selected>option 3</option>
<option value=4>option 4</option>
</select>
$("#source") .change(function () {
var abc = $('option:first-child',this) .text();
Please try this .Hope this will help You..