Question

我在表格中使用此代码作为下拉功能，并且它运行良好。但是，当我尝试在同一页面上多次使用它时，一个正在破坏另一个的信息。我尝试过更改ID设置，但它没有用。我需要做什么才能在单页上多次使用。我正在使用Wordpress并将脚本放在标题中。

<script language="JavaScript" type="text/javascript">
<!--
function openPop(){
    var Sel_Ind = document.getElementById('myURLs').selectedIndex;
    var popUrl = document.getElementById('myURLs').options[Sel_Ind].value;
    winpops=window.open(popUrl,"","width=400,height=338,resizable,")
}
//-->
</script>
</head>
<body>
    <select id="myURLs" onChange="javascript:openPop();">
        <option value="">Select a page...</option>
        <option value="http://news.bbc.co.uk">News</option>
        <option value="http://www.the-company.com">Music</option>
        <option value="http://www.b3ta.com">Laughs</option>
        <option value="http://www.google.com">Search</option>
        <option value="http://www.sitepoint.com/forums">Help</option>
    </select>

Answer 1

我认为那是因为你在onChange处理程序中有硬编码的id。相反，您可以做的是将onChange事件触发的select元素传递给处理函数，并使用它进一步处理。

<select id="myURLs1" onChange="openPop(this)">
    <option value="">Select a page...</option>
    <option value="http://news.bbc.co.uk">News</option>
    <option value="http://www.the-company.com">Music</option>
    <option value="http://www.b3ta.com">Laughs</option>
    <option value="http://www.google.com">Search</option>
    <option value="http://www.sitepoint.com/forums">Help</option>
</select>

<select id="myURLs2" onChange="openPop(this)">
    <option value="">Select a page...</option>
    <option value="http://news.bbc.co.uk">News</option>
    <option value="http://www.the-company.com">Music</option>
    <option value="http://www.b3ta.com">Laughs</option>
    <option value="http://www.google.com">Search</option>
    <option value="http://www.sitepoint.com/forums">Help</option>
</select>

然后在处理函数中，将选择框接受为参数。

function openPop(sel){
    var popUrl = sel.options[sel.selectedIndex].value;
    winpops=window.open(popUrl,"","width=400,height=338,resizable,")
};

这样，您可以拥有所需的选择框，并且处理程序将正常运行。

为此实施检查这个小提琴。

http://jsfiddle.net/BuddhiP/awc6o9ju/

无法在同一页面上多次使用JavaScript下拉列表

1 个答案: