JavaScript function to change div, based on option selected - doesn't always work as expected?
I have a JavaScript function (picture), which is activated when the visitor selects an option (onchange) from the drop down menu (picture_type), which then changes the data within the div (picture_div).
However not always does the data within the div reflect the chosen option, e.g: If you select the 'Select' option...then select the 'URL' option, the div doesn't reflect what should be their for the 'URL'.
Heres the JavaScript function along with the appropriate HTML:
<script>
function picture() {
var picture_type = do开发者_运维百科cument.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = '<a href="predefined_pics.php">Click here</a> to select one.';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}
</script>
<select id="picture_type" onchange="return picture();">
<option value="0" selected="selected">Upload</option>
<option value="1">URL</option>
<option value="2">Select</option>
</select>
<div id="picture_div" style="display: none;">
URL: <input name="url" type="text" style="width: 100%" />
</div>
If you don't understand me, I suggest you test the above code and play with the options to understand me better. :)
All help is greatly appreciated!.
Here is the code ,Try this out
<html>
<head>
<script>
function picture() {
var picture_type = document.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = '<a href="predefined_pics.php">Click here</a> to select one.';
}
if(picture_type == 1) {
document.getElementById('picture_div').innerHTML = 'URL: <input name="url" type="text" style="width: 100%" />';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}
</script>
</head>
<body>
<select id="picture_type" onchange="return picture();">
<option value="0" selected="selected">Upload</option>
<option value="1">URL</option>
<option value="2">Select</option>
</select>
<div id="picture_div" style="display: none;">
URL: <input name="url" type="text" style="width: 100%" />
</div>
</body>
</html>
with regards,
Wazzy
I think there are some inconsistencies in the code.
You are changing the contents of the picture_div only when the option URL is selected, but the div is displayed when either URL or Select is selected.
I think you need to change the value of the picture_div if the Select option is selected.
Actually what is the requirement here? Whether the picture_div has to be displayed while URL or Select options are selected? If that is the case then you have to check the condition
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = '<a href="predefined_pics.php">Click here</a> to select one.';
}
because this condition handles only the Select case. You've to handle the case when the value is 1 (URL) also.
Try this
function picture() {
var picture_type = document.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = '<a href="predefined_pics.php">Click here</a> to select one.';
}else if(picture_type == 1){
document.getElementById('picture_div').innerHTML = 'Option url';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}
加载中,请稍侯......
精彩评论