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


139

Soy nuevo en HTML y PHP y quiero lograr un menú desplegable de la tabla mysql y también codificado. Tengo selección múltiple en mi página, una de ellas 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 proporcionarle que elija entre los tres disponibles. Solía ​​deshabilitar 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 establecer "Elegir etiquetado" como predeterminado y también deshabilitarlo de la selección. ¿Es una manera de hacer esto? Lo mismo debe hacerse con otro select que obtendrá datos de Mysql. Cualquier sugerencia será apreciable.


¿qué tal si agrega un evento de clic en la selección para deshabilitar la primera opción?
David Blacksmith

Debe corregir el error de sintaxis: el valor = "" deshabilitado debe deshabilitarse = "deshabilitado" + eliminar etiquetas de cierre impares </select>
Evgeniy

@Evgeniy oops que </select> pertenece a otra parte de mi código
Ankit Sharma

@AnkitSharma he editado su código: tenía </select><select> <option> ... <option> </select>
Evgeniy

@Evgeniy gracias ..... </select> se copió de mi código por error.
Ankit Sharma

Respuestas:


291

utilizar

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

42
No necesita poner los valores trueo disabled. puedes hacerlo haciendo<option selected disabled>Choose Tagging</option>
Sam Eaton

18
@ SamEaton, solo hace que el código siga la sintaxis XHTML válida, de lo contrario, en HTML5 puede descuidarlo.
Cris

1
Debe establecer el valor = "", de modo que si también lo ha solicitado, se generará un error para elegir del menú desplegable; de ​​lo contrario, se pasará un valor vacío aunque no se haya seleccionado nada. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612


10

Sé que pregunta cómo deshabilitar la opción, pero creo que el resultado visual de los usuarios finales es el mismo con esta solución, aunque probablemente sea un poco menos exigente en 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>

3
Esto no funciona, OP necesita ser seleccionado por defecto jsfiddle.net/tomsihap/5xm7grnb
tomsihap

10

Electron + React Deja que tus dos primeras opciones sean así

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

Primero para mostrar cuando está cerrado Segundo para mostrar primero cuando se abre la lista


8

Uso 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 forma predeterminada.


6

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>



3

Podemos desactivar 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>

1

Si está utilizando jQuery para llenar su elemento seleccionado, 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 permitirá al usuario ver la primera opción como un encabezado deshabilitado ('Elegir etiquetado') y seleccionar todas las demás opciones.

ingrese la descripción de la imagen aquí


0
            <select name="dept" id="dept">
                <option value =''disabled selected>Select Department</option>
                <option value="Computer">Computer</option>
                <option value="electronics">Electronics</option>
                <option value="aidt">AIDT</option>
                <option value="civil">Civil</option>
            </select>

use "SELECCIONADO" qué opción desea seleccionar por defecto. Gracias


Esta guía ya se publicó en esta pregunta aquí: stackoverflow.com/a/42997841/2943403 Su respuesta no agrega ningún valor nuevo a la página y solo contribuye a la hinchazón de la página.
mickmackusa

-1

Puede establecer qué opción se selecciona de forma predeterminada de esta manera:

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

Sugeriría 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, proporcione al elemento una ID de esta manera:

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

y la opción un id:

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

luego:

<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; }
}

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.