off - select multiple html ejemplo

¿Cómo mostrar la opción de deshabilitar HTML seleccionar de forma predeterminada?

Question

Soy nuevo en HTML y PHP y quiero obtener un menú desplegable de la tabla mysql y también codificado. Tengo selección múltiple en mi página, uno de ellos es

<select name="tagging">
    <option value="">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

El problema ahora es que el usuario también puede seleccionar "Elegir etiquetado" como su etiquetado, pero solo quiero que elija entre los tres disponibles. Usé desactivar como

<select name="tagging">
    <option value="" disabled="disabled">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

Pero ahora la "Opción A" se convirtió en la predeterminada. Por lo tanto, quiero configurar "Elegir etiquetado" como predeterminado y también quiero desactivarlo de la selección. Es una forma de hacer esto. Lo mismo debe hacerse con otra selección que obtendrá datos de Mysql. Cualquier sugerencia será apreciable.

Answer 1

podemos deshabilitar el uso de esta técnica.

 <select class="form-control" name="option_select">
      <option selected="true" disabled="disabled">Select option </option>
      <option value="Option A">Option A</option>
      <option value="Option B">Option B</option>
      <option value="Option C">Option C</option>
 </select>

Answer 2

Electron + React Deja que tus dos primeras opciones sean como esta

<option hidden="true>Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>

Primero para mostrar cuando se cierra Segundo para mostrar primero cuando se abre la lista

Answer 3

En HTML5 , para seleccionar una opción desactivada:

<option selected disabled>Choose Tagging</option>

Answer 4

Otra solución de etiqueta SELECT para aquellos que desean mantener la primera opción en blanco.

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none"></option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

Answer 5

Puede establecer qué opción se selecciona de manera predeterminada así:

<option value="" selected>Choose Tagging</option>

Sugiero usar javascript y JQuery para observar el evento de clic y deshabilitar la primera opción después de que se haya seleccionado otra: Primero, dale al elemento una ID así:

<select id="option_select" name="tagging">

y la opción y una identificación:

<option value="" id="initial">Choose Tagging</option>

entonces:

<script type="text/javascript">

$(''option_select'').observe(click, handleClickFunction);

Entonces solo creas la función:

function handleClickFunction () {

if ($(''option_select'').value !== "option_select") 
{
   $(''initial'').disabled=true; }
}

Answer 6

Sé que preguntas cómo desactivar la opción, pero creo que el resultado visual de los usuarios finales es el mismo con esta solución, aunque es probable que requiera menos recursos.

Use la etiqueta optgroup , así:

<select name="tagging">
    <optgroup label="Choose Tagging">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
    </optgroup>
</select>

Answer 7

Si está utilizando jQuery para completar su elemento de selección, puede usar esto:

html

<select id="tagging"></select>

js

array_of_options = [''Choose Tagging'', ''Option A'', ''Option B'', ''Option C'']

$.each(array_of_options, function(i, item) {
    if(i==0) { sel_op = ''selected''; dis_op = ''disabled''; } else { sel_op = ''''; dis_op = ''''; }
    $(''<option '' + sel_op + '' '' + dis_op + ''/>'').val(item).html(item).appendTo(''#tagging'');
  })

Esto le permitirá al usuario ver la primera opción como un encabezado deshabilitado (''Elegir Etiquetado'') y seleccionar todas las demás opciones.

Answer 8

Usar hidden

<select>
  <option hidden>Choose</option>
  <option>Item 1</option>
  <option>Item 2</option>
</select>

Esto no lo desarma, pero puede ocultarlo en las opciones mientras se muestra de manera predeterminada.

jsfiddle

Answer 9

utilizar

<option selected="true" disabled="disabled">Choose Tagging</option>    

Answer 10

 selected disabled="true"

Utilizar esta. Funcionará en nuevos navegadores