Как добавить новые элементы в выбранный, при поиске по выбранному выбору

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Как добавить новое значение, которого нет в выбранном. Я установил ‘no_results_text’ в качестве <a> тега. это работает. $('#secondary_diagnosis').chosen({no_results_text: '<a onclick="add_new_diagnosis()">Save as New </a>'});

Это мой код:

Но если я хочу добавить новое значение в половину выходного значения, то ‘no_results_text’ не отображается. мне нужно решение для вызова моей предопределенной функции add_new_diagnosis() .

Как я могу поместить <a> теги в chosen-search-input ?

Текущий код:

 <select class="col-md-11" name="secondary_diagnosis" id="secondary_diagnosis"
      class="form-control chosen" title="Diagnosis">
          <option value="0">Other</option>
          <option value="0">other retinal</option>
          <option value="0">Couch</option>
          <option value="0">Fever</option>
</select>

 window.onload = function () {
        $('#secondary_diagnosis').chosen({no_results_text: '<a onclick="add_new_diagnosis()">Save as New </a>'});
    }

1. Не могли бы вы поделиться фрагментом кода, пожалуйста?

2. Я поделился этим вопросом сейчас @NadirAbbas

3. мне нужно вызвать мою add_new_diagnosis() функцию

4. Можете ли вы предоставить минимальный рабочий пример этого, например, скрипку js с добавлением и работой CDN.

Ответ №1:

Используя этот список данных, добавьте события к вводу. Это работает для меня.

 <input class="form-control" type="text" list="diagnosis" name="secondary_diagnosis" id="secondary_diagnosis" onclick=""/>
<datalist id="diagnosis" >
       <option value="0">Other</option>
       <option value="0">other retinal</option>
       <option value="0">Couch</option>
       <option value="0">Fever</option>
</datalist>

Ответ №2:

Попробуйте приведенный ниже код.

 window.onload = function () {
        $('#secondary_diagnosis').chosen({no_results_text: 'Save as New'});
        
        $('.chosen-container').on('click', '.no-results', function(){
           add_new_diagnosis($(this).find('span').text());
           $('#secondary_diagnosis').val('').trigger('chosen:updated');
        });
        
        function add_new_diagnosis(val) {
            console.log(`Add new: ${val}`)
        }
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<select class="col-md-11" name="secondary_diagnosis" id="secondary_diagnosis"
      class="form-control chosen" title="Diagnosis">
          <option value="0">Other</option>
          <option value="0">other retinal</option>
          <option value="0">Couch</option>
          <option value="0">Fever</option>
</select>

1. Я это сделал. в качестве этого я хочу ввести other re . как я могу его ввести?

2. мне нужно решение для этой ситуации

3. Вы хотите добавить новую опцию в список выбранных?

4. Ваше решение — curret, но я хочу добавить некоторую часть существующего word.

5. Например: other retinal в списке. но я хочу вводить other re только как новый.

Ответ №3:

Вы должны попробовать плагин jquery select2 вместо chosenJS.

HTML:

 <select class="form-control" id="select2" multiple="multiple">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

Изменено в соответствии с потребностями (инициализация JS):

 $("#select2").select2({
    tags: true,
    width: '100%',
    tokenSeparators: [',', ' ']
}).on("change", function(e) {

    var isNew = $(this).find('[data-select2-tag="true"]');
    if(isNew.length amp;amp; $.inArray(isNew.val(), $(this).val()) !== -1){
        $.post('http://example.com/api/tags/add', { tag: isNew.val() }, function(res){
            if(res) {
                isNew.replaceWith('<option selected value="' res.tag_id '">' res.tag '</option>');
            } else {
                isNew.remove();
            }
        }, 'json');
    }
});