выпадающий список

egoregor · October 4, 2011

есть код:

this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor;

и выпадающий список:

Если я прописываю код прямо внутри списка, за место функции "color()", то код выполняется. Но если я записываю его так

<script type="text/javascript">
                function color() {
                this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor;
                }

             </script>

то ничего не происходит.

В чем проблема?

DrStrangeLove · October 4, 2011

Тебе стоит подробно разобраться с this в Javascript. Здесь, например.

В твоём случае this указывает на объект window. Исправь так:

function color(obj) {
                obj.style.backgroundColor=obj.options[obj.selectedIndex].style.backgroundColor;

                }

А потом так:

<select style='width:100px;' id="color" name="color-choise" size="1" onchange="color(this)";>

P.S.: Всё дело в контексте выполнения (execution context). У тебя работает, потому что контекстом является сам список (объект select).

А не работает, потому что функция color() (в твоём случае по умолчанию принадлежащая глобальному объекту) задаёт другой контекст выполнения - объект window.

Чтобы исправить ты должен в входном параметре передать нужный контекст - текущий объект (Select).

Edited October 4, 2011 by DrStrangeLove

egoregor · October 4, 2011

Спасибо.

Я логику понял, код исправил, но все равно ничего не меняется.

DrStrangeLove · October 4, 2011

Спасибо.
Я логику понял, код исправил, но все равно ничего не меняется.

Покажи свой код. Иногда, когда задаёшь обработчик так

onchange="color(this)";

то могут быть проблемы из-за точки с запятой - попробуй убрать её или переставить как-нибудь, например так -

onchange="color(this);"

egoregor · October 4, 2011

Код такой:


<html>
<head>
 <script type="text/javascript">
                function color(obj) {
                obj.style.backgroundColor=obj.options[obj.selectedIndex].style.backgroundColor;
                }
 </script>

</head>
<body>
 <form action="add-car.php" method="post" name="car-registration">
<label>Color</label>
        <select style='width:100px;' id="color-choice" name="color-choise" size="1" onchange="color(this)";>
         <option style='background-color:white;'  value="white"></option>
         <option style='background-color:yellow;' value="yellow"></option>
         <option style='background-color:red;'  value="red"></option>
         <option style='background-color:orange;' value="orange"></option>
         <option style='background-color:black;' value="black"></option>
         <option style='background-color:gray;' value="gray"></option>
         <option style='background-color:brown;' value="brown"></option>
         <option style='background-color:green;' value="green"></option>
         <option style='background-color:navy;' value="navy"></option>
         <option style='background-color:salmon;' value="salmon"></option>
        </select>
 </form>

Иногда, когда задаёшь обработчик так
onchange="color(this)";
то могут быть проблемы из-за точки с запятой - попробуй убрать её или переставить как-нибудь, например так -
onchange="color(this);"

И с ней, и без нее не работает.

zSpx · October 4, 2011

Все работает. Цвет селекта меняется.

egoregor · October 4, 2011

как так...

Конечно это не весь код моей страницы, только ее часть.

Раз уж на то пошло, вот весь код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home page</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" media="screen" href="css/style.css" />
    <script type="text/javascript">
                function color(obj) {
                obj.style.backgroundColor=obj.options[obj.selectedIndex].style.backgroundColor;

                }
 </script>

</head>
<body>
<?php
  include "includes/connect.php";
?>

<div id="wrapper"><div id="wrapper-inner">

  <div id="header">

    <div id="header-top">
      <div class="site-logo">
        <a href="#" title="Site Logo">Site Logo</a>
      </div>

      <form action="" id="form-search-light">
        <div class="form-item">
          <label for="form-search-light-input-search">You can use search here</label>
          <input type="text" id="form-search-light-input-search" size="12" />
        </div>
        <div class="form-item">
          <input type="submit" value="GO" id="form-search-light-submit" />
        </div>
      </form>

    </div>

    <div id="header-bottom">

      <ul class="menu" id="menu-main-top">
        <li><a href="index.php" title="Home page">Home</a></li>
        <li><a href="car.php" title="About page">Add car</a></li>
        <li><a href="customer.php" title="About page">Add customer</a></li>
      </ul>

    </div>
  </div>
  <div id="content">
    <h2 class="page-title">Add car</h2>
    <div class="block-text">
      <form action="add-car.php" method="post" name="car-registration">
       <div>
        <label>Name</label>
        <input type="text" name="name" id="author" value=""/>

        <label>Year</label>
        <select style='width:100px;' name="year" size="1">
         <?php
          $date_time_array = getdate( time() );
          $i=0;
          while ($i<41) {
           echo "<option value=\"year\">".($date_time_array['year']-$i)."</option>";
           $i++;
           }
         ?>
        </select>

        <label>Cost</label>
        <input type="number" name="cost" value=""/>
        <label>Color</label>
        <select style='width:100px;' id="color-choice" name="color-choise" size="1" onchange="color(this)";>
         <option style='background-color:white;'  value="white"></option>
         <option style='background-color:yellow;' value="yellow"></option>
         <option style='background-color:red;'  value="red"></option>
         <option style='background-color:orange;' value="orange"></option>
         <option style='background-color:black;' value="black"></option>
         <option style='background-color:gray;' value="gray"></option>
         <option style='background-color:brown;' value="brown"></option>
         <option style='background-color:green;' value="green"></option>
         <option style='background-color:navy;' value="navy"></option>
         <option style='background-color:salmon;' value="salmon"></option>
        </select>
        <label>Customer</label>
        <select style='width:100px;' name="customer" size="1" value="" onchange="document.getElementById('id-cust').value=this.options[this.selectedIndex].value">
         <?php
          include "includes/connect.php";
          $res=mysql_query("SELECT id,name FROM customers");
          while($row=mysql_fetch_array($res)){
           $customer=$row[name];
           $id=$row[id];
           echo "<option value=\"".$id."\" >".$customer."</option>";
          }

         ?>
        </select>
        <input type='text' name="id-customer" id="id-cust" value"">
        <input type='text' name="color" id="colo" value"">
        <input name="submit" type="submit" value="ADD">
       </div>
      </form>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="footer-copy">© <a href="#">IT-Excellence</a></div>
  </div>

</div></div>

</body>
</html>

zSpx · October 4, 2011

OMG! Я понял в чем дело. Во первых, у вас много ошибок в html их нужно исправлять. Пример: value"" , но дело не в этом. Скрипт не работает из-за конфликта имени инпута (name="")

<input type='text' name="color" id="colo" value"">

с названием вашей функции. Т.е. name="color" не позволяет использовать функции с тем же именем. Сам не так давно изучаю ДжаваСкрипт, но понимаю, тут проблема в области видимости. Правда плохо понимаю, почему и как создается некий идентификатор с именем color у объекта образованного элементом input с которым и происходит конфликт. Можно ссылкой бросить или объяснить? Ведь мне казалось, что color здесь просто значение свойства name и конфликтовать нечему. Но видно не так.

Edited October 4, 2011 by zSpx

DrStrangeLove · October 4, 2011

Ты везде используешь

onchange="color(this)";

ты пробовал

onchange="color(this);"

??

egoregor · October 4, 2011

Переименовал название функции и заработало )

Впредь буду внимательней.

Спасибо всем большое!

Sign In

выпадающий список

Question

egoregor

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

DrStrangeLove

Link to comment

Share on other sites

egoregor

Link to comment

Share on other sites

DrStrangeLove

Link to comment

Share on other sites

egoregor

Link to comment

Share on other sites

zSpx

Link to comment

Share on other sites

egoregor

Link to comment

Share on other sites

zSpx

Link to comment

Share on other sites

DrStrangeLove

Link to comment

Share on other sites

egoregor

Link to comment

Share on other sites

Join the conversation

Forums

Important Information