iOSでselectedが外れない件
覚書程度に。
必要があって、htmlのselect内で特定のoptionを選んだときに、
アラートを出して、選んだoptionをリセットさせるjavascript(jquery)を書いた。
<script>
jQuery(function(){
jQuery('#foo1').change(function(){
var fo1 = jQuery('#foo1 option:selected').val();
var fo2 = jQuery('#foo2 option:selected').val();
var fo3 = jQuery('#foo3 option:selected').val();
if(!fo1 ==""){
if(fo1 == fo2){
jQuery('#foo1 option:selected').attr("selected",false);
alert(fo2);
}else if(fo1 == fo3){
jQuery('#foo1 option:selected').attr("selected",false);
alert("選択肢がかぶっています");
}
}
});
jQuery('#foo2').change(function(){
var fo1 = jQuery('#foo1 option:selected').val();
var fo2 = jQuery('#foo2 option:selected').val();
var fo3 = jQuery('#foo3 option:selected').val();
if(!fo2 ==""){
if(fo1 == fo2){
jQuery('#foo2 option:selected').attr("selected",false);
alert("選択肢がかぶっています");
}else if(fo2 == fo3){
jQuery('#foo2 option:selected').attr("selected",false);
alert("選択肢がかぶっています");
}
}
});
jQuery('#foo3').change(function(){
var fo1 = jQuery('#foo1 option:selected').val();
var fo2 = jQuery('#foo2 option:selected').val();
var fo3 = jQuery('#foo3 option:selected').val();
if(!fo3 ==""){
if(fo3 == fo2){
jQuery('#foo3 option:selected').attr("selected",false);
alert("選択肢がかぶっています");
}else if(fo1 == fo3){
jQuery('#foo3 option:selected').attr("selected",false);
alert("選択肢がかぶっています");
}
}
});
});
</script>
<select id="foo1">
<option value="">▼お選びください</option>
<option value="a">ぽれぽれぽれ</option>
<option value="b">うかれぽんち</option>
<option value="c">みやわやさん</option>
</select>
<select id="foo2">
<option value="">▼お選びください</option>
<option value="a">ぽれぽれぽれ</option>
<option value="b">うかれぽんち</option>
<option value="c">みやわやさん</option>
</select>
<select id="foo3">
<option value="">▼お選びください</option>
<option value="a">ぽれぽれぽれ</option>
<option value="b">うかれぽんち</option>
<option value="c">みやわやさん</option>
</select>
これ、iOS以外はうまく動く。
$("#foo3 option")val("")としてもだめだった。
で、こうしたらうまくいった。
jQuery('#foo2 option.pon').attr("selected",true);
=>jQuery('#foo2 option:selected').attr("selected",false);
<option class="pon" value="">▼お選びください</option>
=><option value="">▼お選びください</option>
よかったよかった。
