Javascript 在选项框中显示数组索引_Javascript_Arrays_Select

Javascript 在选项框中显示数组索引

javascript arrays select

Javascript 在选项框中显示数组索引,javascript,arrays,select,Javascript,Arrays,Select,我有一个图像数组，通过单击一个接一个地显示，还有一个选项块，用户可以在其中选择要查看的图像。我想选择连接阵列并显示当前显示图像的编号（或索引）。也许你能给我建议一个方法，让我怎么做。这是我的密码： <!DOCTYPE html> <head> <meta charset="UTF-8"> <script type="text/javascript"> var Image_array = [ ["00.jpg", "1"],

我有一个图像数组，通过单击一个接一个地显示，还有一个选项块，用户可以在其中选择要查看的图像。我想选择连接阵列并显示当前显示图像的编号（或索引）。也许你能给我建议一个方法，让我怎么做。这是我的密码：

<!DOCTYPE html>

<head>
 <meta charset="UTF-8">
<script type="text/javascript">
 var Image_array = [
        ["00.jpg", "1"],
        ["01.jpg", "2"],
        ["02.jpg", "3"],
        ["03.jpg", "4"],
        ["04.jpg", "5"],
        ["05.jpg", "6"],
        ["06.jpg", "7"]
      ]
function setf(thisv)
{
if (i == Image_array.length) i = 0;
rotatorbutton.src = Image_array[thisv][0];
}
var i = 0;
function right() {
 i++;
 if (i == Image_array.length) i = 0;
 rotatorbutton.src = Image_array[i][0];
 }
 </script>
</head>
<body >
<div onclick="right()">
    <script type = 'text/javascript'>
    document.write("<img id = 'rotatorbutton' src = '" + Image_array[0] + "' alt = ''/> ");
    </script>
</div>

<div class="pager">
    <form name="billy">
        <select name="option1" id="option" onchange="setf(this.selectedIndex)">
            <script type = "text/javascript">
                for (i = 0; i < Image_array.length; i++)
                {
                document.write("<option>" + Image_array[i][1]);
                }
            </script>
        </select>
            <script type="text/javascript">
            setf(0);
            </script>
</div>
</form>
</div>
<body>


变量映像\u数组=[
[“00.jpg”，“1”]，
[“01.jpg”，“2”]，
[“02.jpg”，“3”]，
[“03.jpg”，“4”]，
[“04.jpg”，“5”]，
[“05.jpg”，“6”]，
[“06.jpg”，“7”]
]
函数setf（thisv）
{
如果（i==Image_array.length）i=0；
rotatorbutton.src=Image_数组[thisv][0]；
}
var i=0；
功能权限（）{
i++；
如果（i==Image_array.length）i=0；
rotatorbutton.src=Image_数组[i][0]；
}
文件。填写（“”）；
对于（i=0；i


var imageArray=[
[“00.jpg”，“1”]，
[“01.jpg”，“2”]，
[“02.jpg”，“3”]，
[“03.jpg”，“4”]，
[“04.jpg”，“5”]，
[“05.jpg”，“6”]，
[“06.jpg”，“7”]
]
函数addOptions（）{
var select=document.getElementById（“选择”）
对于（变量i=0；i


我发现你的代码有一些问题

您不应该使用document.write，因为有新的更好的方法可以从脚本中添加内容，比如使用文档对象模型
就像Edwin提到的，你不应该使用“new Array（）
正如Edwin提到的，您应该缩进代码
在函数“setf”中，您使用了“i”而不是“thisv”
而您忘记关闭标记“”

上面我给你一个解决方案作为例子。
请重新格式化你的代码，以便于阅读。不要使用新数组（）
使用数组文字。例如第一个：Image\u数组[0]=[“http://00.jpg", "1"];很抱歉弄得一团糟，我重建了它-谢谢你的建议！谢谢但我怎样才能在这里插入onclick函数——通过单击图像来更改图像，而不是通过选择框中的选项来更改图像？当我使用onclick函数更改当前图像编号时，如何显示它？好的，我会说另一种方式-请告诉我如何从这部分返回当前显示的图像索引：document.write（“”）；您可以执行parseInt（src，10）-1
，它将为您提供索引src是img元素的一个属性。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style></style>
    <script>
      var imageArray = [
        ["00.jpg", "1"],
        ["01.jpg", "2"],
        ["02.jpg", "3"],
        ["03.jpg", "4"],
        ["04.jpg", "5"],
        ["05.jpg", "6"],
        ["06.jpg", "7"]
      ]

      function addOptions(){
        var select = document.getElementById("select")
        for(var i = 0; i < imageArray.length; ++i){
          var option = document.createElement("option")
          option.innerHTML = imageArray[i][1]
          select.appendChild(option)
        }
      }

      function addRotation(){
        var select = document.getElementById("select")
        var image = document.getElementById("image")
        select.addEventListener("change", function(event){
          image.src = imageArray[this.selectedIndex][0]
        })
      }

      window.addEventListener("load", addOptions)
      window.addEventListener("load", addRotation)
    </script>
  </head>
  <body>
    <form>
      <img src="00.jpg" id="image">
      <select id="select">
      </select>
    </form>
  </body>
</html>