Quiero un elemento desplegable donde el usuario pueda seleccionar entre las opciones disponibles o seleccionar la opción de ingresar el valor que a su vez permite ingresar el valor. Quiero específicamente que el usuario pueda ingresar el valor solo cuando selecciona la opción "Ingresar un valor".

Esto es lo que he intentado hasta ahora.

HTML-

<div class="ginput_container">
    <select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
       <option value="0">None</option>
       <option value="155">1-70</option>
       <option value="185">71-250</option>
       <option value="*">Enter value</option>
    </select>
    <input type="text" value="None" class="holder" >
</div>

JavaScript-

jQuery(".gfield_select").change(function() {
        var val = jQuery(this).val();
        var enter = jQuery(this).parent().find('option:selected').text();
        var x = jQuery(this).parent();
        if (enter ==="Enter a value" || enter === "Enter value"){
          var holder = x.find('.holder');
          holder.val('');          
          holder.prop('disabled',false);
          holder.focus();
        } else {
          x.find('.holder').val(x.find('option:selected').text());
        }
});

Violín JS

Sin embargo, no funcionará correctamente si vuelvo a hacer clic en la opción Introducir valor.

0
subas_poudel 30 ago. 2014 a las 11:55

3 respuestas

La mejor respuesta

Gracias chicos, creo que he encontrado mi respuesta

HTML-

<div class="ginput_container">
    <select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
       <option value="0">None</option>
       <option value="155">1-70</option>
       <option value="185">71-250</option>
       <option value="*">Enter value</option>
    </select>
    <input type="text" value="None" class="holder" >
</div>

JavaScript-

jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
  var holder = x.find('.holder');
  holder.val('');          
  holder.prop('disabled',false);
  holder.focus();
  jQuery(this).val("0"); // Change select value to None.
} else {
  x.find('.holder').val(x.find('option:selected').text());
  x.find('.holder').prop('disabled',true);
}

});

JS FIDDLE

0
David says reinstate Monica 30 ago. 2014 a las 08:59

Creo que hay muchos complementos que hacen lo que quieres, pero si quieres crear el tuyo propio, es una solución básica y simple. Puede crear un select y un textbox con display:none así:

<select id="ddlDropDownList">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="-1">Enter Value</option>
</select>
<input id="txtTextBox" type="text" />

<style>
    #txtTextBox{
        display:none;
    }
</style>

Entonces prueba este JQuery:

$("#ddlDropDownList").change(function(){
    if($(this).val() == '-1'){
        $("#txtTextBox").fadeIn();
    }else{
        $("#txtTextBox").fadeOut();
    }
});

Verifique la demostración de JSFiddle

1
Moshtaf 30 ago. 2014 a las 08:06

He bifurcado su JSFiddle a http://jsfiddle.net/pwdst/4ymtmf7b/1/ que espero haga lo que querías lograr.

HTML-

<div class="ginput_container">
    <label for="input_1_4">Select option</label>
    <select class="medium gfield_select" id="input_1_4" name="input_4" tabindex="15">        
        <option value="0">None</option>
        <option value="155">1-70</option>
        <option value="185">71-250</option>
        <option value="*">Enter value</option>
      </select>
      <div>
          <label class="hidden-label" for="input_1_4_other">Other value</label>
          <input class="holder" id="input_1_4_other" disabled="disabled" name="input_1_4_other" placeholder="None" type="text" />
     </div>
</div>

JavaScript-

jQuery(".gfield_select").change(function() {
        var $this = jQuery(this);
        var val = $this.val();
        var holder = $this.parent().find('.holder');
        if (val === "*"){
            holder.val('');          
            holder.removeAttr('disabled');
            holder.focus();
        } else {           
            holder.val(this.options[this.selectedIndex].text);
            holder.attr('disabled', 'disabled');
        }
});

Cuando se elige la opción "Introducir valor", se activa el cuadro de entrada, el valor se configura en una cadena vacía y se enfoca. Si se elige otra opción, la entrada de texto se deshabilita nuevamente y se utiliza el valor de texto de la lista de selección.

1
pwdst 30 ago. 2014 a las 08:34