This question already has answers here:
How to display only the text in datalist HTML5 and not the value?
(3 answers)
Closed 5 years ago.
I want to hide datalist value. Am using this code
<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</datalist>
I mean in the inputbox this showing values and product 1
i need to show only product 1,2,&3...
hide value (1,2,3)
.
Note: Here am passing value 1,2,3 so i just want to hide that only
here my code https://jsfiddle.net/69u5Leoa/
You may want to use select, because for the select element, the user is required to select one of the options you've given.
For the datalist element, it is suggested that the user select one of the options you've given, but he can actually enter anything he wants in the input.
you can see this to get more information HTML Form: Select-Option vs Datalist-Option
<select id="options">
<option></option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
Value="<%# DataBinder.Eval(Container, "ItemIndex") %>" it can solution this problem
Related
I have a tough time with Materialize CSS and Select compoment.
Code goes like this:
<select id="selectCompId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
When i visit the form i always get either value 1, 2 or 3 based on some DB query. Now, if i get 2 i want to set selected on option number 2 as initial selection. I'm having issues doing so.
Tried doing this:
document.getElementById('selectCompId').value = '2' but it seems like it doesn't work with this materialize component or i'm doing it wrong.
Whole code can be found here:
https://jsfiddle.net/536Lu1xe/1/
Expected result:
Initial value set to desired value (let's say 2 in this case).
Solution -> https://jsfiddle.net/536Lu1xe/2/
At the bottom, under script tags:
var elem = document.querySelector('#selectCompId');
var instances = M.FormSelect.init(elem);
document.querySelector('#selectCompId option[value="2"]').setAttribute('selected', 'selected');
M.FormSelect.init(elem);
If I understand correctly, you want to programmatically select an option in a select box.
In order to do that, we have to select all the options in a select box and select the desired option. The challenge here is to define the option that needs to be selected. In this case, I'm using the index for this.
Let's see how that looks like in code.
let n = 1; // the index of the option that needs to be selected. In this case, we want to select Item 2 (the option at index=1)
// the following line will select the <select/> on the page
const select = document.querySelector('select');
// now we have to loop through all options and select the one at Index=1
select.querySelectorAll('option')[n].selected = true;
<select>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
You need to add selected attribute to select:
<select>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
EDIT:
You'll also need to re-initialize Select after updating the value:
const elem = document.getElementById('select_id');
M.FormSelect.init(elem);
This question already has answers here:
jQuery change input text value
(6 answers)
Closed 7 years ago.
I need some help with changing the placeholder of an input via <select>,
I mean I need to change the placeholder of an input if the option of the <select> has been changed
My code:
<select id="select" name="se">
<!-- if this is chosen placeholder will be 'you have chosen option n1' !-->
<option value="1">option 1</option>
<!-- if this is chosen placeholder will be 'you have chosen option n2' !-->
<option value="2">option 2</option>
<!-- if this is chosen placeholder will be 'you have chosen option n3' !-->
<option value="3">option 3</option>
</select>
<input type="text" id="inp" name="choosen">
Try this :
$('select').on("change",function()
{
$('#inp').val("you have chosen option n" + $.trim(this.value));
}).change();
Example : https://jsfiddle.net/DinoMyte/zcL12b1u/1/
This question already has answers here:
Changing the selected option of an HTML Select element
(14 answers)
Closed 7 years ago.
<select name="cat1" class="form-control input-lg">
<option value="">All Businesses</option>
<option value="78">Deals</option>
<option value="46">Delivery</option>
<option value="45">Dispensary</option>
<option value="47">Doctor</option>
</select>
I know you could simply add the selected="selected" to the whatever option to make it default in the drop down. Currently the "All Businesses" option is the default one showing. I want the Dispensary option to show as default
<select name="cat1" class="form-control input-lg">
<option value="">All Businesses</option>
<option selected="selected" value="45">Dispensary</option>
<option value="46">Delivery</option>
<option value="47">Doctor</option>
<option value="78">Deals</option>
</select>
so basically I want that achieved but I am unable to edit the HTML code. Is there a way I can achieve it without touching the HTML?
$('select[name="cat1"] > option[value="45"]').attr('selected','selected');
This jQuery code will select that option element and add that attribute to it.
This question already has answers here:
Get clicked option in multiple dropdown
(4 answers)
Closed 8 years ago.
I have a select multiple list:
<select id="List" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
I trigger the event on the select:
$("select#List").change(function() {
// do ajax stuff...
});
I need to get the value of the clicked option that fired the change event.
Example:
if the option 1 is already selected, and I select the "option 2" that triggers the .change() event, I want get the value of "option 2".
(I've already read this post Get clicked option in multiple dropdown, but it doesn't work for me).
What does not work for you, I've checked the answers in link which you posted and it works.
See working example on fiddle: http://jsfiddle.net/unkxt8h3/
The only thing here is, that the event is fired even when you deselect the option. But checking if it's selected or not should be easy peacy ;)
html:
<select id="List" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
JS:
$("#List option").click(function () {
var value = $(this).attr("value");
console.log(value);
alert(value);
});
I have a web form that I'm applying both client and server side validation to and on this one text input field I'm looking for some way to have conditional code that sets a character limit based on what a dropdown menu is set to.
For example:
If Option 3 is selected, limit maximum character limit to 10.
<select>
<option>Option 1</option>
<option> Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<label>Text Field</label>
<input type="text" />
I've been experimenting with a number of pre-coded javascript / jquery validation scripts and they all work fine except when it comes to this particular need.
How can this be done?
Thanks for any advice.
Create a select onchange event that will set the maxLength of the input. You can use the option value as the value for the event. Example:
<select id="sel" onchange="document.getElementById('txt').maxLength = document.getElementById('sel').value;" >
<option value="3">Option 1</option>
<option value="5"> Option 2</option>
<option value="10">Option 3</option>
<option value="20">Option 4</option>
</select>
<br/>
<label>Text Field</label>
<input type="text" id="txt" value="" maxlength="3" />
You can test it here - http://jsfiddle.net/codefuze/R7RtJ/