menus - ¿Cómo hacer un menú desplegable solo con jquery?

menu desplegable multinivel jquery

Question

Estoy usando la siguiente declaración para que sea de solo lectura, pero no está funcionando.

$(''#cf_1268591'').attr("readonly", "readonly"); 

No quiero que sea deshabilitado, quiero hacerlo solo de forma legible.

Answer 1

Intenta hacer una cadena vacía cuando "presionar tecla"

El Html es:

<input id="cf_1268591" style="width:60px;line-height:16px;border:1px solid #ccc">

El Jquery es:

$("#cf_1268591").combobox({
  url:"your url",
  valueField:"id",
  textField:"text",
  panelWidth: "350",
  panelHeight: "200",
});

// hacer después de la tecla con cadena vacía

var tb = $("#cf_1268591").combobox("textbox");
  tb.bind("keyup",function(e){
  this.value = "";
});

Answer 2

Como dijo @Kanishka, si desactivamos un elemento de formulario, no se enviará. He creado un fragmento para este problema. Cuando el elemento de selección está desactivado, crea un campo de entrada oculto y almacena el valor. Cuando está habilitado, elimina los campos de entrada ocultos creados.

Más información

jQuery(document).ready(function($) {
  var $dropDown = $(''#my-select''),
    name = $dropDown.prop(''name''),
    $form = $dropDown.parent(''form'');

  $dropDown.data(''original-name'', name); //store the name in the data attribute 

  $(''#toggle'').on(''click'', function(event) {
    if ($dropDown.is(''.disabled'')) {
      //enable it 
      $form.find(''input[type="hidden"][name='' + name + '']'').remove(); // remove the hidden fields if any
      $dropDown.removeClass(''disabled'') //remove disable class 
        .prop({
          name: name,
          disabled: false
        }); //restore the name and enable 
    } else {
      //disable it 
      var $hiddenInput = $(''<input/>'', {
        type: ''hidden'',
        name: name,
        value: $dropDown.val()
      });
      $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field 
      $dropDown.addClass(''disabled'') //disable class
        .prop({
          ''name'': name + "_1",
          disabled: true
        }); //change name and disbale 
    }
  });
});

/*Optional*/

select.disabled {
  color: graytext;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#" name="my-form">
  <select id="my-select" name="alpha">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</form>
<br/>
<button id="toggle">toggle enable/disable</button>

Answer 3

Es un artículo antiguo, pero quiero advertir a las personas que lo encontrarán. Tenga cuidado con el atributo disabled con el elemento got por nombre. Extraño, pero parece que no es demasiado trabajo.

esto no funciona:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$(''name=img_size'').attr("disabled",$("#fullpage").attr("checked"));
</script>

este trabajo:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$(''#img_size'').attr("disabled",$("#fullpage").attr("checked"));
</script>

Sí, sé que es mejor que use prop y no attr, pero al menos ahora prop no funcionará debido a la versión anterior de jquery, y ahora no puedo actualizarlo, no preguntes por qué ... la diferencia html solo se agrega id:. ..

<select name="img_size" class="dropDown" id="img_size">
<option value="200">200px
</option><option value="300">300px
</option><option value="400">400px
</option><option value="500">500px
</option><option value="600" selected="">600px
</option><option value="800">800px
</option><option value="900">900px
</option><option value="1024">1024px
</option></select>

<input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" />

...

No encontré ningún error en el script, y en la versión con el nombre no hubo errores en la consola. Pero, por supuesto, puede ser mi error en el código

Visto en: Chrome 26 en Win 7 Pro

Lo siento por mala gramática.

Answer 4

Esta línea hace selects con el atributo readonly de solo lectura:

$(''select[readonly=readonly] option:not(:selected)'').prop(''disabled'', true);

Answer 5

Establecer un elemento con disabled no enviará los datos, sin embargo, select elementos select no tienen readonly .

Puedes simular un readonly en select usando solo CSS:

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

Entonces úsalo como:

$(''select'').attr(''readonly'', true);

Resultado:

$(''a'').on(''click'', function() {
  $(''select'').attr(''readonly'', true);
});

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click here to enable readonly</a>
<select>
<option>Example 1</option>
<option>Example 2</option>
<option>Example 3</option>
</select>

Answer 6

Este código primero almacenará la selección original en cada menú desplegable. Luego, si el usuario cambia la selección, restablecerá el menú desplegable a su selección original.

http://jsfiddle.net/4aHcD/22/

//store the original selection
$("select :selected").each(function(){
    $(this).parent().data("default", this);
});

//change the selction back to the original
$("select").change(function(e) {
    $($(this).data("default")).prop("selected", true);
});

Answer 7

Esto es lo que estás buscando:

$(''#cf_1268591'').attr("style", "pointer-events: none;");

Funciona de maravilla.

Answer 8

Funciona muy bien

$(''#cf_1268591 option:not(:selected)'').prop(''disabled'', true);

Con esto puedo ver las opciones, pero no puedo seleccionarlo

Answer 9

He encontrado que una forma mejor de hacerlo es usar CSS para eliminar los eventos de puntero y modificar la opacidad en el menú desplegable (prueba 0.5). Esto le da la apariencia al usuario de que está deshabilitado de forma normal, pero aún publica datos.

De acuerdo, esto tiene algunos problemas con la compatibilidad con versiones anteriores, pero en mi opinión es una mejor opción que sortear el molesto problema de la discapacidad / solo lectura.

Answer 10

No existe un menú desplegable de solo lectura. Lo que podría hacer es restablecerlo al primer valor manualmente después de cada cambio.

$("select").change(function(event) {
    $(this).val($(this).find("option").first().val());
});

http://jsfiddle.net/4aHcD/

Answer 11

Para simplificar las cosas, aquí hay un plugin de jQuery que lo hace sin la molestia: https://github.com/haggen/readonly

Answer 12

Prueba este ... sin deshabilitar el valor seleccionado.

$(''#cf_1268591 option:not(:selected)'').prop(''disabled'', true);

Esto funciona para mi..

Answer 13

Tal vez puedas intentarlo de esta manera

function myFunction()
{
   $("select[id^=myID]").attr("disabled", true);
   var txtSelect = $("select[id^=myID] option[selected]").text();
}

Esto establece el primer valor de la lista desplegable como el valor predeterminado y parece de solo lectura

Answer 14

También puede desactivarlo y, en el momento en que realice la llamada de envío, habilítelo. Creo que es la forma más fácil :)

Answer 15

Yo desactivaría el campo. Luego, cuando se envíe el formulario, no lo deshabilite. En mi opinión, esto es más fácil que tener que lidiar con campos ocultos.

//disable the field
$("#myFieldID").prop( "disabled", true );           

//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
    $("#myFieldID").prop( "disabled", false );
});     

Answer 16

tuve el mismo problema, mi solución fue desactivar todas las opciones no seleccionadas. Muy fácil con jQuery:

$(''option:not(:selected)'').attr(''disabled'', true);

Answer 17

$(''#cf_1268591'').attr("disabled", true); 

desplegable siempre es de solo lectura. lo que puedes hacer es desactivarlo

si trabaja con un formulario, los campos desactivados no se envían, por lo tanto, use un campo oculto para almacenar el valor desplegable deshabilitado.