как обновить исходный индекс данных bootstrap select с исходным значением параметра выбора

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

Я конвертирую эту кнопку выбора в средство выбора начальной загрузки. Теперь, когда он отображает, он скрывает исходную опцию выбора и создает собственное представление.

Мой вариант выбора будет отображать идентификатор как значение, и он будет отображаться, как показано ниже.

<option value="38">option 1</option>

<option value="37">option 2</option>

<option value="36">option 3</option>

Но затем, когда я увижу пользовательский интерфейс начальной загрузки, у него будет опция, называемая data-original-index, как это

<li data-original-index="1">option 1</li>

<li data-original-index="2">option 2</li>

<li data-original-index="3">option 3</li>

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

Есть ли способ отобразить значение data-original-index со значением моего исходного параметра??? Любые предложения приветствуются!


javascript html jquery twitter-bootstrap bootstrap-select
person Guruprasad J Rao    schedule 09.03.2015    source источник
comment
Есть ли причина, по которой index= начинается с 2?   -  person NewToJS    schedule 09.03.2015
comment
Нет, нет.. Это был просто пример.. на самом деле он начинается с 1.. Хорошо, позвольте мне отредактировать эту часть...   -  person Guruprasad J Rao    schedule 09.03.2015
comment
Вы все еще можете использовать data-original-index для получения эталонного значения из скрытого выбора, используя HTMLSelectElement.children[data-original-index].getAttribute("value")   -  person Mouser    schedule 09.03.2015

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете прикрепить событие onchange к исходному выбору. Bootstrap привязан к этому выбору. Поэтому, если вы выберете параметр в меню начальной загрузки, он позволит вам получить выбранное значение.

$(this).find("option:selected").attr("value"); Эта строка ищет выбранный вариант и возвращает атрибут value.

См. этот пример:

$(function() {

  $('.selectpicker').on('change', function(){
    var selected = $(this).find("option:selected").attr("value");
    alert(selected);
  });
  
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker">
   <option value="38">option 1</option>
   <option value="37">option 2</option>
   <option value="36">option 3</option>
</select>

person Mouser    schedule 09.03.2015
comment
Спасибо .. это то, что я ожидал. :) Хороший ответ.. :) - person Guruprasad J Rao; 10.03.2015