Got some problems with a php script that outputs a jQuery script.
The purpose of the jQuery code is that when you select an item from the select field that other items need to be disabled(works correct in all conditions) and that at the same time text in corresponding divs' text are altered.
The thing is that the script basically works.. however when you've made a selection only the disabling works everytime but the divs are only updated once, so you need to refresh the page if you want to do it again..
<script type="text/javascript">
$(function(){
$(".iOption").change(function() {
if(this.value=='0'){
$(".option0").replaceWith("<b>string</b>");
$(".field0").removeAttr("disabled");
$(".field1").attr("disabled", "disabled");
$(".option1").replaceWith("field 2");
$(".field2").attr("disabled", "disabled");
$(".option2").replaceWith("field 3");
}
else if(this.value=='1'){
$(".option0").replaceWith("<b>string</b>");
$(".field0").removeAttr("disabled");
$(".field1").attr("disabled", "disabled");
$(".option1").replaceWith("field 2");
$(".field2").attr("disabled", "disabled");
$(".option2").replaceWith("field 3");
}
else if(this.value=='2'){
$(".option0").replaceWith("<b>host</b>");
$(".field0").removeAttr("disabled");
$(".field1").attr("disabled", "disabled");
$(".option1").replaceWith("field 2");
$(".field2").attr("disabled", "disabled");
$(".option2").replaceWith("field 3");
}
else if(this.value=='3'){
$(".option0").replaceWith("<b>host</b>");
$(".field0").removeAttr("disabled");
$(".option1").replaceWith("<b>port</b>");
$(".field1").removeAttr("disabled");
$(".option2").replaceWith("<b>timeout</b>");
$(".field2").removeAttr("disabled");
}
});
});
</script>
What exactly goes wrong here?
Thanks!