JSFiddle - React, Tailwind, and code Playground

by ric47121

HTML

<div id="contenedor">
    <select name="myselect" id="myselect" readonly="readonly">
    <option value="1">Country1</option>
    <option value="2">Country2</option>
    <option value="3">Country3</option>
    <option value="4">Country4</option>
    <option value="5">Country5</option>
    <option value="6">Country6</option>
    <option value="7" selected="selected">Country7</option>
    <option value="8">Country8</option>
    <option value="9">Country9</option>
    </select>
</div>

JavaScript

var readonlySelect = function(selector, makeReadonly) {

    $(selector).filter("select").each(function(i){
        var select = $(this);

        //remove any existing readonly handler
        if(this.readonlyFn) select.unbind("change", this.readonlyFn);
        if(this.readonlyIndex) this.readonlyIndex = null;

        if(makeReadonly) {
            this.readonlyIndex = this.selectedIndex;
            this.readonlyFn = function(){
                this.selectedIndex = this.readonlyIndex;
            };
            select.bind("change", this.readonlyFn);
        }
    });

};

//readonlySelect("#contenedor", true); 

//this.bur()=this.selectedIndex;

/*
$("#myselect").focus(function(){    
    this.bur()=this.selectedIndex;
});

$("#myselect").change(function(){
    this.selectedIndex=this.defaultIndex;
});
*/
$("#myselect").attr("onchange","this.selectedIndex=this.defaultIndex;");
$("#myselect").attr("onfocus","this.bur()=this.selectedIndex;" );