Невозможно дать динамические значения Jquery Select2 с HTML из списка DropDown

Question

Я разрабатываю проект автомобиля моего клиента как Gari.PK. Он хочет, чтобы я изменил выпадающие списки, и я застрял в проблеме. Вот мой HTML-код выпадающего списка.

<select class="round-10 js-example-basic-single" name="c_version" id="c_version"> 
    <option value="">- Any Version -</option> 
    <option value="XLi VVTi">XLi VVTi <br><span style="color: red;">2016 . Petrol . Manual</span></option> 
    <option value="GLi 1.3 VVTi">GLi 1.3 VVTi <br><span style="color: red;">2016 . Petrol . Manual</span></option> 
    <option value="GLi Automatic 1.3 VVTi">GLi Automatic 1.3 VVTi <br><span style="color: red;">2016 . Petrol . Automatic</span></option> 
    <option value="Altis Automatic 1.6">Altis Automatic 1.6 <br><span style="color: red;">2016 . Petrol . Automatic</span></option> 
    <option value="Altis 1.8">Altis 1.8 <br><span style="color: red;">2016 . Petrol . Manual</span></option> 
    <option value="Altis CVT i 1.8">Altis CVT i 1.8 <br><span style="color: red;">2016 . Petrol . Automatic</span></option> 
    <option value="Altis Grande 1.8">Altis Grande 1.8 <br><span style="color: red;">2016 . Petrol . Manual</span></option> 
    <option value="Altis Grande CVT i 1.8">Altis Grande CVT i 1.8 <br><span style="color: red;">2016 . Petrol . Automatic</span></option> 
    <option value="">Other</option> 
</select> 

Оказывается, как это на передней

DropDown list mine and desired

или увидеть http://www.gari.pk/used-cars/sell/ на сайте.

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

Но я не могу этого сделать. Я пытаюсь использовать jQuery select2, но проблема в том, что Select2 не выбирает HTML из тега 'option'. Я видел некоторые сообщения, говоря, что вы можете дать данные динамически ВЫБ.2 нас в:

var data = [ 
     { id: 0, text: '<div style="color:green">enhancement</div>' }, 
     { id: 1, text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>' }]; 

    $(".js-example-basic-single").select2({ 
     data: data, 
     templateResult: function (d) { return $(d.text); }, 
     templateSelection: function (d) { return $(d.text); }, 

    }); 

Теперь, как я могу передать данные из тега «опции» в этом коде выше.

Answer 1

Вы можете использовать templateResult из select2 и написать свой обычай templateResult, где вы возвращаетесь parsedHtml. Также вам нужно использовать опцию escapeMarkup. Рассмотрим ниже пример и рабочего сниппета:

var data = [{ 
 
    id: "XLi VVTi", 
 
    text: 'XLi VVTi <br><span style="color: red;">2016 . Petrol . Manual</span>' 
 
}, { 
 
    id: "GLi 1.3 VVTi", 
 
    text: 'GLi 1.3 VVTi <br><span style="color: red;">2016 . Petrol . Manual</span>' 
 
}, { 
 
    id: "GLi Automatic 1.3 VVTi", 
 
    text: 'GLi Automatic 1.3 VVTi <br><span style="color: red;">2016 . Petrol . Automatic</span>' 
 
}, { 
 
    id: "Altis Automatic 1.6", 
 
    text: 'Altis Automatic 1.6 <br><span style="color: red;">2016 . Petrol . Automatic</span>' 
 
}, { 
 
    id: "Altis 1.8", 
 
    text: 'Altis 1.8 <br><span style="color: red;">2016 . Petrol . Manual</span>' 
 
}, { 
 
    id: "Altis CVT i 1.8", 
 
    text: 'Altis CVT i 1.8 <br><span style="color: red;">2016 . Petrol . Automatic</span>' 
 
}, { 
 
    id: "Altis Grande 1.8", 
 
    text: 'Altis Grande 1.8 <br><span style="color: red;">2016 . Petrol . Manual</span>' 
 
}, { 
 
    id: "Altis Grande CVT i 1.8", 
 
    text: 'Altis Grande CVT i 1.8 <br><span style="color: red;">2016 . Petrol . Automatic</span>' 
 
}, { 
 
    id: "", 
 
    text: 'Others' 
 
}]; 
 

 

 
$(".js-example-basic-single").select2({ 
 
    data: data, 
 
    escapeMarkup: function(m) { 
 
    return m; 
 
    }, 
 
    templateResult: function(d) { 
 
    return $.parseHTML(d.text); //return parsed html since your text itself contains html elements 
 
    //you can also move this code into a separate function and provide the function name for templateResult 
 
    } 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> 
 
<select class="round-10 js-example-basic-single" name="c_version" id="c_version"> 
 

 
</select>

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