Как сделать выпадающий список только с использованием jquery?

Я использую следующий оператор, чтобы сделать его только для чтения, но он не работает.

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

Я не хочу отключать его, я хочу сделать это только для чтения.

Ответ 1

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

выпадающее меню всегда читается только. что вы можете сделать, это отключить его

Если вы работаете с формой, отключенные поля не отправляются, поэтому используйте скрытое поле для хранения отключенного выпадающего значения

Ответ 2

У меня была такая же проблема, но я решил отключить все выбранные параметры. Очень просто с jQuery:

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

Ответ 3

Попробуйте это... без отключения выбранного значения.

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

Это работает для меня..

Ответ 4

Это то, что вы ищете:

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

Работает как шарм.

Ответ 5

Установка элемента с disabled не будет отправлять данные, однако элементы select не имеют только readonly.

Вы можете смоделировать readonly при select с помощью CSS для стилизации и JS, чтобы предотвратить изменение с помощью вкладки:

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

Затем используйте его так:

var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
    $(i.target).val($(this).attr('data-original-value'));
});

Результат:

  // Updated 08/2018 to prevent changing value with tab
$('a').on('click', function() {
var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
	$(i.target).val($(this).attr('data-original-value'));
});
});

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 selected>Example 2</option>
<option>Example 3</option>
</select>

Ответ 6

Я бы отключил поле. Затем, когда форма отправляется, сделайте ее не отключенной. На мой взгляд, это проще, чем иметь дело со скрытыми полями.

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

Ответ 7

Чтобы упростить здесь плагин jQuery, который делает это без хлопот: https://github.com/haggen/readonly

Ответ 8

Эта строка делает выбор с атрибутом readonly только для чтения:

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

Ответ 9

Простой jquery для удаления не выбранных опций.

$('#your_dropdown_id option:not(:selected)').remove();

Ответ 10

Этот код сначала сохранит исходный выбор в каждом раскрывающемся списке. Затем, если пользователь изменяет выбор, он будет reset раскрывающимся списком до его первоначального выбора.

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

Ответ 11

Я нашел, лучший способ сделать это - использовать CSS для удаления указателей-событий и изменения непрозрачности при выпадающем списке (попробуйте 0,5). Это дает пользователю возможность отключить его как обычно, но все же записывает данные.

У этого есть некоторые проблемы с обратной совместимостью, но, на мой взгляд, лучший вариант, чем преодоление раздражающей проблемы с отключением/чтением.

Ответ 12

Вы также можете отключить его, и в тот момент, когда вы делаете запрос отправки, активируйте его. Я думаю, что это самый простой способ:)

Ответ 13

Самый простой вариант для меня состоял в том, чтобы сделать select как readonly и добавить:

onmousedown="return false" onkeydown="return false"

Вам не нужно писать лишнюю логику. Нет скрытых входов или отключен, а затем повторно включен в форме submit.

Ответ 14

Нет такой вещи, как раскрывающийся список только для чтения. То, что вы могли бы сделать, это reset его к первому значению вручную после каждого изменения.

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

http://jsfiddle.net/4aHcD/

Ответ 15

Это старая статья, но я хочу предупредить людей, которые ее найдут. Будьте осторожны с отключенным атрибутом с полученным элементом по имени. Странно, но кажется, что это не так.

это не работает:

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

эта работа:

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

Да, я знаю, что лучше использовать prop, а не attr, но по крайней мере теперь поддержка не будет работать из-за старой версии jquery, и теперь я не могу ее обновить, не спрашивайте, почему... Разница html добавляется только 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()" />

...

Я не обнаружил ошибок в script, а в версии с именем ошибки в консоли не было. Но, конечно, это может быть моя ошибка в коде

Видел: Chrome 26 на Win 7 Pro

Извините за плохую грамматику.

Ответ 16

Попробуйте сделать пустую строку, когда "нажимать"

Html:

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

JQuery:

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

//сделать после keyup с пустой строкой

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

Ответ 17

Как сказал @Канишка, если мы отключим элемент формы, он не будет отправлен. Я создал фрагмент этой проблемы. Когда элемент выбора отключен, он создает скрытое поле ввода и сохраняет значение. Когда он включен, удаляются созданные скрытые поля ввода.

Дополнительная информация

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>

Ответ 18

Это хорошо работает

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

С этим я могу видеть параметры, но я не могу выбрать его

Ответ 19

Может быть, вы можете попробовать таким образом

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

Это устанавливает первое значение раскрывающегося списка в качестве значения по умолчанию, и оно кажется только для чтения

Ответ 20

html5 поддерживает:

'
     $("#cCity").attr("disabled", "disabled"); 
     $("#cCity").addClass('not-allow');

Ответ 21

Вот небольшая вариация на другие ответы, которые предлагают использовать отключено. Поскольку атрибут "disabled" может фактически иметь любое значение и по-прежнему отключаться, вы можете установить его только для чтения, например disabled = "только для чтения". Это отключит элемент управления как обычно, а также позволит вам легко оформить его по-другому, чем обычные отключенные элементы управления, например, с помощью CSS:

select[disabled=readonly] {
    .... styles you like for read-only
}

Если вы хотите, чтобы данные включались в отправку, используйте скрытые поля или включите их перед отправкой, как подробно описано в других ответах.