2

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!

anitha_rajesh
  • 21
  • 2
  • Sorry, it doesn't seem to work for me, probably because I am using a datalist.. Also, I have another drop down list (select list) in the same page which also uses – anitha_rajesh Oct 01 '20 at 19:55
  • I have tried one of the solutions suggested by you in the link **$("select").val([]);** . And it does seem to work when I replace "select" with "#selectCar" (referring to the id in my use case). Thank you so much! :) – anitha_rajesh Oct 01 '20 at 20:11

0 Answers0