jQueryをListboxに追加するとIE9で機能しない

Question

ユーザが追加/削除できるリストボックスがあります。追加するには、既に存在しない場合はテキストをリストの先頭に追加するテキストボックスと追加ボタンがあります。 jQueryを使用してイベントをフックアップし、リストの前に追加します。

リストボックスとボタンのHTML：

<select data-val="true" data-val-required="The BuyingReportRecipients field is required." id="recipients" multiple="multiple" name="BuyingReportRecipients" style="min-width:160px"></select> 

<input type="text" id="new-recipients" /> 
<button id="add-to-recipients">Add</button> 
<button id="remove-from-recipients">Remove Selected</button> 

および関連のjavascript：

<script src="/BuyingReport/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
. 
. 
. 

function addListValue(listName) { 
    var value = $("#new-" + listName).val(); 
    var values = []; 

    $("#" + listName + " *").each(function() { values.push(this.value) }); 

    if (values.indexOf(value) == -1) { 
     $("#" + listName).prepend("<option selected=\"selected\">" + value + "</option>"); 
    } 

    return false; 
} 

function removeSelectedListValues(listName) { 
    $("#" + listName).find("option:selected").remove(); 

    return false; 
} 

$(document).ready(function() { 
    $("#add-to-recipients").click(function() { return addListValue("recipients"); }); 

    $("#remove-from-recipients").click(function() { return removeSelectedListValues("recipients"); }); 
}); 

このすべてはChromeとFirefoxで正常に動作しますが、IE9は協力しません。リストボックスは空の四角形としてレンダリングされます（Chromeでは最小幅のスタイルに従います）。addをクリックしても効果はありません。私がこれを書いたとき、私はjavascriptについてほとんど、jQueryについてはそれほど知りませんでした。だから、私はGoogleから学べるものとすべてが結びついていました。これについてもっと正しい方法があれば、私はそれを公開しています。

Answer 1

クリックショートカットの代わりにバインドを使用してください。私はIE9と変更イベントのショートカットで同様の問題を抱えています。

$(document).ready(function() { 
    $("#add-to-recipients").bind('click', function() { return addListValue("recipients"); }); 

    $("#remove-from-recipients")bind('click', function() { return removeSelectedListValues("recipients"); }); 
}); 

Answer 2

あなたの質問を正しく理解していても、ここにIE9レンダリングのバグがあるようです。 IE9では、親選択に幅が全く設定されていないか、または明示的な幅が設定されていない限り、オプション要素に親選択と同じ幅が設定されていません。しかし、選択にmin-widthが設定されているだけで、問題が発生します。要するに、あなたのコードに何も問題はありませんが、固定値のwidthを設定することで回避できます。

これは実際にはjavacriptなしで確認できます。簡単に見るためのjsfiddleがあります：http://jsfiddle.net/fordlover49/bpusG/

<select data-val="true" multiple="multiple" style="min-width:160px"> 
    <option selected>bad</option> 
    <option selected>width</option> 
</select> 
<br> 

<select data-val="true" multiple="multiple" > 
    <option selected>no</option> 
    <option selected>width</option> 
</select> 
<br> 

<select data-val="true" multiple="multiple" style="width:160px"> 
    <option selected>fixed</option> 
    <option selected>width</option> 
</select>