Раскрывающийся список Новое окно Открыть JavaScript - PullRequest
Новая
       35

Раскрывающийся список Новое окно Открыть JavaScript

0 голосов
/ 06 июля 2018

Я чрезвычайно новичок в javaScript и не знаю, как создать раскрывающийся список с описанием изображения. После того, как вы выбрали изображение, открывается другое окно с изображением Может кто-нибудь помочь? Что я делаю неправильно? Прошло уже почти 2 недели на эту одну проблему, и я не могу понять это. Спасибо. 

    function display_image(selectedImage) {


      var selectionName =selectedImage.options[selectedImage.selectedIndex].text;
      var selection = selectedImage.options[selectedImage.selectedIndex].value;

        }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8">
<title>Lesson 5 Application Project</title>
</head>
<body>
<h3>CIW JavaScript Specialist</h3>
<hr />
<p>
Select an image:
</p>
<select name="images">
    <option value="mountains.jpg">Mountains</option>
    <option value="sunset1.jpg">Sunset</option>
    <option value="trees.jpg">Trees</option>
</select>


</body>
</html>

1 Ответ

0 голосов
/ 06 июля 2018

Должен обрабатываться событием onChange в поле выбора.

И если вы хотите передать значение выбранной опции, просто передайте this.value 

    function display_image(selectedImage) {
      console.log(selectedImage);
      //imgURL-create imgURL based on the selected image
      // here you can open new window and pass the image path
       window.open(imgURL);
        }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8">
<title>Lesson 5 Application Project</title>
</head>
<body>
<h3>CIW JavaScript Specialist</h3>
<hr />
<p>
Select an image:
</p>
<select onchange="display_image(this.value)" name="images">
    <option value="mountains.jpg">Mountains</option>
    <option value="sunset1.jpg">Sunset</option>
    <option value="trees.jpg">Trees</option>
</select>


</body>
</html>
...