0

我有以下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 等的方法。有趣的是，当我提醒该值时它工作正常，当我测试它时它会执行一次，但之后不会变回单次。

在此先感谢强尼

更新：

<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>
4

2 回答 2

0

这里的 jQuery 文档说：

.replaceWith() 方法从 DOM 中删除内容，并通过一次调用在其位置插入新内容。

我相信您正在替换showPackageSelect您在.replaceWith()函数中放入的内容。换句话说，您正在从 DOM中删除showPackageSelect第一个事件。onChange由于divDOM 中不再存在，该choosePackage()函数不再起作用，因为它再也找不到showPackageSelect div了。这可能就是为什么它只在第一次起作用的原因。

如果您想使用当前方法更改内容，我建议您使用.html()更改div. 这是您的代码的jsFiddle 示例.html()，使用.

于 2012-07-19T02:22:46.507 回答
0

要获取“选择”元素的值，您不能简单地通过 .value 获取其值，而是需要遍历其所有选项并找出选择了哪些选项。这是因为“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!');
    }

});
于 2012-07-19T02:29:23.580 回答