I am using two methods of selection in my page, one, using a datalist and another, using a dropdown. Say, I select an option from the datalist. The selected value will be displayed in its textbox like in the following image:
sample image of datalist after selection of option
Now, when I select a value from the dropdown, I am trying to clear/remove the selection made previously using the datalist . i.e., I would simply like to display an empty space instead of the selected option in the text box of datalist (like it was, before selecting any value from the datalist options).
I have tried using $('#selectCar').val(" ");.
But this clears all the options from the datalist too. Instead, I would only like the displayed text changed/deleted.
Any suggestions on how this can be done is much appreciated!
Sample datalist:
<body>
<label>Your Cars Name: </label>
<input type="text" id="selectCar" list="cars">
<datalist id="cars">
<option value="BMW"/>
<option value="Bentley"/>
<option value="Mercedes"/>
<option value="Audi"/>
<option value="Volkswagen"/>
</datalist>
</body>
I have tried using a placeholder too. But after an option in the datalist has been selected, I was unable to reset it to the value of placeholder when a value from the dropdown is selected. If this is possible, please let me know how it can be done too.
Thanks in advance!