根据所选选项更改 div 的 JavaScript 函数 - 并不总是按预期工作？

发布于 2024-10-09 08:27:58 字数 1172 浏览 0 评论 0原文

我有一个 JavaScript 函数（图片），当访问者从下拉菜单 (picture_type) 中选择一个选项 (onchange) 时，该函数就会被激活，然后更改 div (picture_div) 内的数据。

然而，div 中的数据并不总是反映所选选项，例如：如果您选择“选择”选项...然后选择“URL”选项，则 div 不会反映“URL”的内容。

这是 JavaScript 函数以及相应的 HTML：

<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').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>

如果您不明白我的意思，我建议您测试上面的代码并使用选项来更好地理解我。 :)

非常感谢所有帮助！

原文

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 = 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').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!.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生一梦 2024-10-16 08:27:58

这是代码，试试这个

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

，

Wazzy

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

回复收藏 0 原文

一口甜 2024-10-16 08:27:58

我认为代码中存在一些不一致之处。

仅当选择 URL 选项时，您才会更改 picture_div 的内容，但当 URL 或 Select 时，会显示 div 被选中。

我认为如果选择了 Select 选项，您需要更改 picture_div 的值。

其实这里的要求是什么呢？选择URL或Select选项时是否必须显示picture_div？如果是这种情况，那么您必须检查条件

if (picture_type == 2) {
    document.getElementById('picture_div').innerHTML = '<a href="predefined_pics.php">Click here</a> to select one.';
}

，因为此条件仅处理 Select 情况。您还必须处理值为 1 (URL) 的情况。

试试这个

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';
    }
}

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';
    }
}

回复收藏 0 原文

~没有更多了~