Question

此代码有效。当选择一个下拉框时，它会显示一个图像，并且还会为该图像创建一个可以单击的链接。我需要它在新页面而不是现有页面中打开。

我尝试了window.open，但是没有用。我也尝试过href =“ _ blank”，但这只是打开一个空白页。


    <script language="javascript">
    <!--

    function linkrotate(which){
    var mylinks=new Array()

    mylinks[0]=""
    mylinks[1]=""
    mylinks[2]=""
    mylinks[3]=""
    mylinks[4]=""
    mylinks[5]=""
    mylinks[6]=""

    window.location=mylinks[which]
    }


    function showimage()
    {
    if (!document.images)
    return
    document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
    }
   //-->
   </script>
    <table style="width: 1016px; height: 230px;" border="0" cellpadding="0" cellspacing="0">

   <tbody>
    <tr>
      <td width="100%">
      <div style="text-align: center;"> </div>
      <form name="mygallery">
        <div style="text-align: center;"> </div>
        <p style="text-align: center;">
        <select name="picture" size="1" onchange="showimage()">
        <option selected="selected" value="me.gif">PPT Slide</option>
        <option value="mon.gif">Monday</option>
        <option value="montier.gif">Monday Tier 3</option>
        <option value="tues.gif">Tuesday</option>
        <option value="tuestier">Tuesday Tier 3</option>
        <option value="wed.gif">Wednesday</option>
        <option value="wedtier.gif">Wednesday Tier 3</option>
        <option value="thurs.gif">Thursday</option>
        <option value="thurstier.gif">Thursday Tier 3</option>
        <option value="friday.gif">Friday</option>
        <option value="fridaytier.gif">Friday Tier 3</option>
        </select>
        </p>
      </form>
      </td>
    </tr>
    <tr>
      <td width="100%">
      <p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onmouseover="window.status='';return true"><img src="me.gif" name="pictures" border="0" height="400" width="600">

Answer 1

请尝试使代码保持简单，在JavaScript中，您对同一个DOM元素的调用要比您只需设置select元素的属性onchange像这样时要调用的DOM元素更多：

<select name="picture" size="1" onchange="showimage(this)">

像这样在您的代码上引用它：

function showimage(e){
    return document.images.pictures.src = e.options[e.selectedIndex].value
}

此外，您可以只在相同的变量定义中定义数组元素，因此不必两次调用相同的变量：

var mylinks = [
    "http://www.placehold.it/200x200",
    "http://www.placehold.it/200x200",
    "http://www.placehold.it/200x200",
    "http://www.placehold.it/200x200",
    "http://www.placehold.it/200x200",
    "http://www.placehold.it/200x200",
    "http://www.placehold.it/200x200"
];

然后，只需在新窗口中打开它，即可使用：

function linkrotate(which) {
    var mylinks = [
        "http://www.placehold.it/200x200",
        "http://www.placehold.it/200x200",
        "http://www.placehold.it/200x200",
        "http://www.placehold.it/200x200",
        "http://www.placehold.it/200x200",
        "http://www.placehold.it/200x200",
        "http://www.placehold.it/200x200"
    ];
    window.open(mylinks[which], '_blank');
}

注意： 首先请确保您拥有与数组元素相同数量的选项，否则，如果您在选项中选择了索引9，但索引9为myLinks数组中未定义，它将显示一个空窗口。

一种解决方案是使用JavaScript在select元素中生成选项。

基于您的mylinks数组：

function generateOptions() {
    let select = document.querySelector("#imageselect");
    mylinks.forEach((link, index) => {
        let option = document.createElement("option");
        option.value = link;
        option.innerText = `Element ${index}`;
        select.appendChild(option);
    });
}

您选择元素的HTML将是：

<select id="imageselect" name="picture" size="1" onchange="showimage(this)"></select>

签出：

直接在HTML中具有选项：

function linkrotate(which){
    var mylinks=[
    	"http://www.placehold.it/200x200",
      "http://www.placehold.it/200x200",
      "http://www.placehold.it/200x200",
      "http://www.placehold.it/200x200",
      "http://www.placehold.it/200x200",
      "http://www.placehold.it/200x200",
      "http://www.placehold.it/200x200"
    ];
		console.log(which);
    window.open(mylinks[which], '_blank');
    }


function showimage(e){
    return document.images.pictures.src = e.options[e.selectedIndex].value
}

<tbody>
    <tr>
      <td width="100%">
      <div style="text-align: center;"> </div>
      <form name="mygallery">
        <div style="text-align: center;"> </div>
        <p style="text-align: center;">
        <select name="picture" size="1" onchange="showimage(this)">
        <option selected="selected" value="me.gif">PPT Slide</option>
        <option value="mon.gif">Monday</option>
        <option value="montier.gif">Monday Tier 3</option>
        <option value="tues.gif">Tuesday</option>
        <option value="tuestier.gif">Tuesday Tier 3</option>
        <option value="wed.gif">Wednesday</option>
        <option value="wedtier.gif">Wednesday Tier 3</option>
        <option value="thurs.gif">Thursday</option>
        <option value="thurstier.gif">Thursday Tier 3</option>
        <option value="friday.gif">Friday</option>
        <option value="fridaytier.gif">Friday Tier 3</option>
        </select>
        </p>
      </form>
      </td>
    </tr>
    <tr>
      <td width="100%">
      <p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onmouseover="window.status='';return true"><img src="me.gif" name="pictures" border="0" height="400" width="600">

使用JavaScript生成的选项：

var mylinks=[
  "http://www.placehold.it/200x200",
  "http://www.placehold.it/100x200",
  "http://www.placehold.it/230x260",
  "http://www.placehold.it/200x200",
  "http://www.placehold.it/200x200",
  "http://www.placehold.it/200x200"
];

function linkrotate(which){
		console.log(which);
    window.open(mylinks[which], '_blank');
    }


function showimage(e){
    return document.images.pictures.src = e.options[e.selectedIndex].value
}



function generateOptions(){
	let select = document.querySelector("#imageselect");
  mylinks.forEach((link,index)=>{
  	let option = document.createElement("option");
    option.value = link;
    option.innerText = `Element ${index}`;
    select.appendChild(option);
  });
}

generateOptions();

<tbody>
    <tr>
      <td width="100%">
      <div style="text-align: center;"> </div>
      <form name="mygallery">
        <div style="text-align: center;"> </div>
        <p style="text-align: center;">
        <select id="imageselect" name="picture" size="1" onchange="showimage(this)">
          
        </select>
        </p>
      </form>
      </td>
    </tr>
    <tr>
      <td width="100%">
      <p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onmouseover="window.status='';return true"><img src="me.gif" name="pictures" border="0" height="400" width="600">

下拉框的新页面

1 个答案:

签出：