Теги Span исчезают из исходного кода — вместо этого используйте Select2

#jquery #html #jquery-select2

#jquery #HTML #jquery-select2

Вопрос:

У меня есть следующий HTML-код:

 <select class = "form-control">
    <option value="0">sometext</option>
    <option value="1">sometext <span class="myclass1">someothertext</span></option>
    <option value="2">sometext <span class="myclass2">someothertext</span></option>
    <option value="3">sometext <span class="myclass3">someothertext</span></option>
    <option value="4">sometext <span class="myclass4">someothertext</span></option>
</select>
  

Когда я использую «inspect element» в браузере (Chrome и Mozilla), тег span отсутствует, но someothertext есть без span. Если я проверю исходный код на новой странице, щелкнув правой кнопкой мыши -> просмотреть исходную страницу, тег span будет там.

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

Обновите мой вопрос, используя плагин Jquery Select2 из ответа «дубликат». Я загрузил плагин jquery Select2 и пытаюсь использовать его для включения тегов span.

 <select id="selectid">
        <option value="0" data-foo="">sometext</option>
        <option value="1" data-foo="myclass1">sometext</option>
        <option value="2" data-foo="myclass2">sometext</option>
        <option value="3" data-foo="myclass3">sometext</option>
        <option value="4" data-foo="myclass4">sometext</option>
</select>

<script src="/static/js/jquery.js"></script>
<script src="/static/js/select2.js"></script>
   <script type="text/javascript">
   function format(state) {
    var originalOption = state.element;

    return state.text   " "   "<span class='"  $(originalOption).data('foo')   "'>"   $(originalOption).data('foo')    "</span>" ;
   }
   $("#selectid").select2({
    minimumResultsForSearch: -1,
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
   });
 </script>

<script src="/static/js/mycustomjs.js"></script>
  

Плагин изменяет исходный код на div и включает теги span в параметры. Но даже если я вызову mycustom js после select2.js и все же, похоже, это не работает. В любом другом диапазоне это работает.

Комментарии:

1. Вероятно, это потому, что это недопустимый HTML, а элементы option не могут содержать элементы span.

2. @j08691 этого не знал. Есть ли какой-либо способ разделить текст внутри опции, чтобы я мог манипулировать только вторым текстом с помощью кода jQuery?

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

4. Я обновил свой вопрос, используя информацию о «дублирующем» вопросе