JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<h2>Error on IE6</h2>
<p>The error occurs with no option element for select element at first.Even if option elements are appended with jQuery, it does not work.</p>
<p>select要素にoption要素が無いhtmlに対し、jQueryでoption要素を追加している。特に、option要素が無い状態というのが、原因になっている様子。</p>
<form id="foo">
    <select name="foo">
    </select>
    <button>run</button>
</form>

<h2>Work</h2>
<p>No any errors if there is at least one option element.Even if option elements are removed and appended with jQuery, it works.</p>
<p>select要素にoption要素が1個以上存在していれば、jQueryでそのoption要素を消して改めて追加するなどしても、動作する。</p>
<form id="bar">
    <select name="bar">
    <option value="">dummy</option>
    </select>
    <button>run</button>
</form>

JavaScript

// IE6 select/option #11564
$(function(){
    $('button').click(function(e){
        e.preventDefault();
        var $select = $(this.form).find("select").empty();
        var array = ['ein', 'zwei', 'drei'];
        for( var i=0; i<array.length; i++ ){
            var $option = $('<option>');
            $option.val('').text(array[i]);
            $select.prepend($option);
        }
        $select.children(':first').prop('selected', true);
    });
});