JSFiddle - React, Tailwind, and code Playground

by zaza zviaduari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.min.css">
<select data-placeholder="Select value" class="change">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="other">other</option>    
</select>

<div style="left" id="otherform"></div>

JavaScript

$("document").ready(function() {

    $(".change").change(function(){
        if ($(this).val() == "other"){
         $('#otherform').append('<input id="newform" type="text" name="other" value="other">');
        } else {
         $('#newform').remove();
        }
    });
  
$(".change").chosen({width: "220px"}).on('chosen:no_results', function(){

$('.chosen-results').html('<li id="other" class="active-result">other</li>');
 
$('#other').click(function(){
$('.chosen option[value=other]').attr('selected','selected');
})

});
});