JavaScript的不工作

Question

我有以下的html：

<select name="user_level" id="user_level" class="input" onChange="javascript:choosePackage(this.value);" > 
<option value="1" >Single</option> 
<option value="3" >Multi</option> 
<option value="7" >Super</option>      
</select> 

<div id="showPackageSelect" ></div> 

，這是我的js：

<script type="text/javascript"> 

function choosePackage(packageselected){ 

if(packageselected=='3') { $("#showPackageSelect").replaceWith("<div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><?php $rPackages = mysql_query('select * from packages WHERE id>=2 AND id <=5 ORDER BY id DESC');while ($rp = mysql_fetch_array($rPackages)) { ?><option value='<?php echo $rp['id'];?>'><?php echo $rp['package'];?></option><?php } ?></select>"); 

} else if(packageselected=='1') { $("#showPackageSelect").replaceWith("<div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><option value='1'>Super User</option></select>"); 

} else if(packageselected=='6') { $("#showPackageSelect").replaceWith("<div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><option value='6'>Single</option></select>"); 

} else { alert('this should never happen!'); } 

} 

</script> 

我曾嘗試使用的if else等。 有趣的是幾種方法當我提醒它的價值，它工作正常，當我測試它它做了一次，但之後，將不會改回單。

預先感謝 強尼

UPDATE：

<script type="text/javascript"> 

function choosePackage(packageselected){ 

if(packageselected=='3') 
$("#showPackageSelect").replaceWith("<div id='showPackageSelect' ><div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><?php $rPackages = mysql_query('select * from packages WHERE id>=2 AND id <=5 ORDER BY id DESC');while ($rp = mysql_fetch_array($rPackages)) { ?><option value='<?php echo $rp['id'];?>'><?php echo $rp['package'];?></option><?php } ?></select></div>"); 

else if(packageselected=='1') 
$("#showPackageSelect").replaceWith("<div id='showPackageSelect' ><div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><option value='1'>Super User</option></select></div>"); 

else if(packageselected=='7') 
$("#showPackageSelect").replaceWith("<div id='showPackageSelect' ><div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><option value='6'>Single</option></select></div>"); 
} 

</script> 

Answer 1

jQuery的文檔here說：

的.replaceWith（）方法去除從DOM的內容和插入新 內容在一個電話的地方。

我相信你用.replaceWith()函數中的內容代替了showPackageSelect。換句話說，您將從DOM中刪除第一個onChange事件中的showPackageSelect。由於div不再存在於DOM中，因此choosePackage()函數不再有效，因爲它無法再找到showPackageSelectdiv。這可能是爲什麼它只能在第一次使用。

如果您想要使用您當前的方法更改內容，我建議您使用.html()這會更改div中的HTML。這是您的代碼使用.html()的jsFiddle example。

Answer 2

要獲得「select」元素的值，您不能簡單地通過.value獲取其值，但是您需要遍歷其所有選項並找出選擇哪個（s）。這是因爲「select」元素可以允許多個選擇。

您已經使用jQuery您的腳本，或許會與下面的腳本更容易考慮：

$("#user_level").change(function(eventObject){ 
    var packageSelected = $("option:selected", eventObject).val(); 

    if(packageselected=='3') { 
     $("#showPackageSelect").replaceWith("<div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><?php $rPackages = mysql_query('select * from packages WHERE id>=2 AND id <=5 ORDER BY id DESC');while ($rp = mysql_fetch_array($rPackages)) { ?><option value='<?php echo $rp['id'];?>'><?php echo $rp['package'];?></option><?php } ?></select>"); 
    } else if (packageselected=='1') { 
     $("#showPackageSelect").replaceWith("<div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><option value='1'>Super User</option></select>"); 
    } else if (packageselected=='6') { 
     $("#showPackageSelect").replaceWith("<div id='normal'>User Package</div><select name='user_package' id='user_package' class='input'><option value='6'>Single</option></select>"); 
    } else { 
     alert('this should never happen!'); 
    } 

});