This is the first time I've ever tried a JSFiddle in Safari. Is there some goofy reason that JSFiddle wouldn't work right in Safari 4? Someone did report that Safari 5 works fine. So what am I missing here?
JavaScript:
$(document).ready(function(){
$("#productSize").change(function(){
var me = $(this);
var avail = me.find("option:selected").html().split("-")[1].trim();
$("#quantity option").each(function() {
$(this).remove();
});
for(var i=1; i<= avail; i++) {
$("#quantity").append("<option>"+i+"</option>");
}
});
});
HTML:
<label>Sizes
<select name="item_options[product_size]" id="productSize">
<option value="s">small - 10</option>
<option value="m">medium - 1</option>
<option value="l">large - 5</option>
<option value="xl">extra large - 10</option>
</select>
</label>
<label>Quantity
<select name="quantity" id="quantity">
</select>
</label>
JSFiddle demonstrating problem: jsfiddle
UPDATE: I'm trying this in all other browsers, finding different behavior in all of them. This does exactly what it's supposed to in Firefox. No problems. IE doesn't seem to like how I'm calling trim() so I've changed the JSFiddle to accommodate that.
$(document).ready(function(){
$("#productSize").change(function(){
开发者_JS百科 var me = $(this);
var myText = me.find("option:selected").text().split("-")[1];
var avail = parseInt($.trim(myText), 10);
$("#quantity option").remove();
for(var i=1; i<= avail; i++) {
$("#quantity").append("<option value='"+i+"'>"+i+"</option>");
}
});
});
Updated JSFiddle This has been tested and works in IE, FF, Chrome, but still I get nothing, the $(document).ready & the .change() don't even execute in Safari 4.
UPDATE #2 Just to clarify even further, this Jquery code does not run in JSFiddle/safari 4.0.5. I don't even get the alert so the .change() isn't running...
$(document).ready(function(){
$("#productSize").change(function(){
alert("Hello World");
});
});
Try the jsFiddle JSLint button - it shows a couple of errors which I think are causing your display problems.
Try this
$(document).ready(function(){
$("#productSize").change(function(){
var me = $(this);
var avail = parseInt(me.find("option:selected").text().split("-")[1].trim());
$("#quantity option").remove();
for(var i=1; i<= avail; i++) {
$("#quantity").append("<option value='"+i+"'>"+i+"</option>");
}
});
});
It appears to me that there is a limitation with JSFiddle and Safari 4.0.5. I can't get even the simplest selectors to work and kick off a very simple binding.
This works in every browser I've tried (FF multiple versions, IE 7 & 8, Chrome 12.0.x, & Safari 5.1). If anyone can explain why I'd love to hear it otherwise I'm just going to assume this is a bug in either Safari 4 or JSFiddle. Either way I'm moving onto more current browsers.
精彩评论