jquery - Adding items to select does not work in Chrome -
i have following code works fine in ie8. jquery code add items multi-select list. in chrome , safari not working - items not visible
note: though works in firefox, aligning right. , when select option item, gets hidden.
how can make working in 4 browsers?
jsfiddle: http://jsfiddle.net/lijo/upr8k/
code
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $(function () { $("#btncostpagenumbermagnifinglens").click(function () { $("#mtxtcostpagedescription").append('<option value=1>my option</option>'); }); }); }); </script> <style type="text/css"> .floaterleft { width:300px; height:300px; background-color:gray; padding:10px 10px 10px 10px; } </style> <body> <div class="floaterleft"> <div class="headertextbox"> <input id="txtcostpagenumber" id="costpagenumber" name="costpagenumber" style="width: 240px; padding-right: 15px" type="text" value="" /> </div> <div class="magenifyingbtn, headermagnifybutton"> <input type="button" name="btncostpagenumbermagnifinglens" id="btncostpagenumbermagnifinglens" class="magenifyingbtn"> </div> <select id="mtxtcostpagedescription" name="mtxtcostpagedescription" multiple="multiple" style="width: 290px; padding: 10px 152px 0px 154px; float: right"></select> </div> </body>
problem @ select style
padding: 10px 152px 0px 154px; this hides options
demo padding removed style on element
Comments
Post a Comment