2

I'm trying to make a text field that has a drop down menu, but the user is only able to select options from the drop down menu. I want to disable the user's ability to type in the text box, while still allowing them to select an option, but I don't know how to do that. I've tried disable and readonly, but neither do what I want, although it is possible that I am using these attributes wrong.

Edit I realized two mistakes in my original question. I meant disabled instead of disable, and I also meant text input instead of text field.

Keaden Knight
  • 27
  • 4
  • what are you actually trying to achieve? Why do you want to nest a dropdown menu into a textfield? Besides of that, please provide any necessary code you use so far. – tacoshy Nov 04 '20 at 23:28
  • it isn't `disable`, its `disabled`. This should work: `` – Mr PizzaGuy Nov 04 '20 at 23:43
  • @Mr PizzaGuy I realized my mistake, but it's not the spelling that's the issue. I don't want the effect that `disabled` has. – Keaden Knight Nov 05 '20 at 02:21
  • @tacoshy It's not necessarily a textfield, but rather an input field with a data list attached. I want the users input into the field to be limited to the options I have set within the data list. – Keaden Knight Nov 05 '20 at 02:23
  • hm... so the users can only type what the datalist contains – Mr PizzaGuy Nov 05 '20 at 13:08

1 Answers1

3

Why you want to have a text field, you can simply use select tag

<label for="cars">Choose a car:</label>

<select name="cars" id="cars" oninput="myFunc(this)">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

This will create a dropdown. You can attach the value to a div to show it

function myFunc(selected){       
    //you can replace the divId below by your div's id
    document.getElementById("divId").innerHTML=selected.value;
}

Or you can use input type="radio"

hemant kumar
  • 545
  • 6
  • 19
  • Thank you, I changed the `DivElement` to `document.getElementById("id")` just because I don't know what that does, but it still worked great. – Keaden Knight Nov 05 '20 at 16:53
  • You have done right. I have just pointed any divElement, which you can get by any method such as document.getElementById("id"), document.querySelector("#id"), or document.getElementsByClassName("class")[0]. There are plenty of more methods, so I have not pointed any one just wrote DivElement – hemant kumar Nov 06 '20 at 11:27