DropDown 목록에서 HTML로 Jquery Select2에 동적 값을 제공 할 수 없습니다.

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가 'option'태그에서 HTML을 선택하지 않는 것이 문제입니다. 난 당신이 아래에 우리를 선택 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

당신은 select2의 templateResult을 활용하고 parsedHtml을 반환 할 경우 사용자 정의 templateResult를 작성할 수 있습니다. 또한 escapeMarkup 옵션을 사용해야합니다. 예를 들어 및 작업 조각 아래 고려 : templateSelection가 작동하려면

이

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>

지금, 당신은 당신이 제대로 후 선택된 데이터를 표시 할 수 있도록 적절한 형식을 확인해야합니다. 당신이 그 길을 찾을 수 있기를 바랍니다.