我有一个点击事件，在firefox中运行得很好，即9.这个想法基本上是从下拉列表中选择并将值推入数组然后在div中显示。如果该值为空，则清空数组和div。点击“submitList”解析php中的列表。
有没有更好的方法与所有浏览器兼容？
HTML / PHP看起来像这样......
$chart_query = mysql_query("SELECT id, title FROM songs WHERE team_name='$team_name' ORDER BY title ASC");
while($row = mysql_fetch_array($chart_query)){
$song_id = $row['id'];
$song_title = $row['title'];
$song_chart .= '<div align="left" class="song_links">';
if ($logOptions_id == $admin_id) {
$song_chart .= '<div id="songChart'.$song_id.'" style="border-bottom:1px dotted gray;">
<select name="selection" class="selection">
<option></option>
<option value="01-'.$song_id.'&'.$song_title.'">1</option>
<option value="02-'.$song_id.'&'.$song_title.'">2</option>
<option value="03-'.$song_id.'&'.$song_title.'">3</option>
<option value="04-'.$song_id.'&'.$song_title.'">4</option>
<option value="05-'.$song_id.'&'.$song_title.'">5</option>
<option value="06-'.$song_id.'&'.$song_title.'">6</option>
<option value="07-'.$song_id.'&'.$song_title.'">7</option>
<option value="08-'.$song_id.'&'.$song_title.'">8</option>
<option value="09-'.$song_id.'&'.$song_title.'">9</option>
<option value="10-'.$song_id.'&'.$song_title.'">10</option>
<option value="11-'.$song_id.'&'.$song_title.'">11</option>
<option value="12-'.$song_id.'&'.$song_title.'">12</option>
<option value="13-'.$song_id.'&'.$song_title.'">12</option>
<option value="14-'.$song_id.'&'.$song_title.'">14</option>
<option value="15-'.$song_id.'&'.$song_title.'">15</option>
</select>
– <a href="http://' . $dyn_www . '/template.php?id='.$song_id.'" style="color:#9B1717; text-decoration:none;">'.$song_title.'</a> <img src="../images/loading.gif" id="chartDeletingpic'.$song_id.'" style="display:none;" /> <a href="#" onclick="deleteSongChart('.$song_id.')" style="color:gray; float:right; font-weight:100;">delete</a></div></div>';
} else {
$song_chart .= ' – <a href="http://' . $dyn_www . '/template.php?id='.$song_id.'" style="color:#9B1717; text-decoration:none;">'.$song_title.'</a></div>';
}
}
这是另一部分......
<div id="selectionButton" style="display:none; width:96%; clear:both; padding:3px 10px;">
<label>List-Date</label><br />
<select name="list_month_New" class="formFields" id="list_month_New">
<option value=""></option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="list_day_New" class="formFields" id="list_day_New">
<option value=""></option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="list_year_New" class="formFields" id="list_year_New">
<option value=""></option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select><br />
<div>
<div id="selected_songs" style="clear:both; padding:5px 0px; color:#225c7e;">
</div>
<div style="width:100%; background-color:#F3F3F3; border:1px solid #D1D1D1;">
<div align="right">
<img src="../images/loading.gif" id="songListLoading_New" style="display:none;" />
<input id="submitList" type="submit" value="submit" class="submit" style="margin:0px;" />
</div>
</div>
</div>
</div>
<div id="selectionBox" style="width:96%; clear:both; padding:3px 10px;">'.$song_chart.'</div>
<input name="team_name" id="team_name" type="hidden" value="'.$team_name.'" /><br />
</div>';
这是jquery ......
$(document).ready(function(){
$(".selection").val("");
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
$(".selection option").click(function(){
s = [];
$("#selectionBox select option:selected").each(function(){
$("#selected_songs").text('');
var v = $(this).val();
if(v != ''){
s.push(v);
}
if(s != ""){
$('#selectionButton').show();
}else{
$("#list_month_New").val();
$("#list_day_New").val();
$("#list_year_New").val();
$('#selectionButton').hide();
}
});
s.sort();
jQuery.each(s, function(){
O = "";
O = this+"<br />";
str = /&(.+)/.exec(O)[1];
num = O.replace(/\-.*/, '');
fullString = '<span style="color:black">'+num+'</span> - '+str;
$("#selected_songs").append(fullString);
});
$("#submitList").click(function(){
if(s != ""){
$("#songListLoading_New").show();
var m = $("#list_month_New").val();
var d = $("#list_day_New").val();
var y = $("#list_year_New").val();
var n = "<?php echo $team_name; ?>";
if(m == "" || d == "" || y == ""){
alert("You must include an entire date");
$(".selection").val("");
$("#selected_songs").text("");
$('#selectionButton').hide();
$("#songListLoading_New").hide();
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
s = '';
}else{
$.post('scripts/sendList.php?id=<?php echo $id; ?>', {s:s, m:m, d:d, y:y, n:n}, function(data){
$(".list").prepend(data);
$(".list").slideDown(900);
$(".selection").val("");
$("#selected_songs").text("");
$('#selectionButton').hide();
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
$("#songListLoading_New").hide();
}); s = '';
}
}
});
});
});
答案 0 :(得分：0)
问题出在.selection和#selectionBox上。出于某种原因，它变得混乱，并且在其他浏览器中存在冲突。