Question

I have the following 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> 

And this is my 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>

I have tried several ways using if else etc..
The funny thing is that when i alert the value it works fine, and when i test it it does it once but then after that wont change back to single.

Thanks in advance
Jonny

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

The jQuery documentation here says:

The .replaceWith() method removes content from the DOM and inserts new
content in its place with a single call.

I believe you are replacing showPackageSelect with the content you put in the .replaceWith() function. In other words, you are removing showPackageSelect on the first onChange event from the DOM. Since the div no longer exists in the DOM, the choosePackage() function no longer works because it cannot find the showPackageSelect div anymore. This may be why it only works the first time.

If you want to change the contents using your current method, I would recommend you use .html() which changes the HTML in the div. Here is a jsFiddle example of your code using .html().