Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> чекбокс с текстом 
:(
    Опции темы
diez
Дата 2.10.2007, 10:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 7.8.2007

Репутация: нет
Всего: -1
Задача динамически сгенерировать чекбокс с текстом, полученым из select.
Вот собственно код:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>test</title>
    <script type="text/javascript">
    
    function showSelected(a) 
    { 
    

        var selNum = a.object_type.selectedIndex; 
        var selText = a.object_type.options[selNum].text;
    
            
            var input = document.createElement("INPUT");
            input.setAtribute("type","checkbox");
            input.setAtribute("name","test");
            
            input.appendChild(selText);        
            document.getElementsByTagName("FORM")[0].appendChild(input);
            
    }
    </script>
</head>

<body>
<form action="test.php" method="post">
    <select name="object_type" id="object_type_variant" onChange="showSelected(this.form)">
        <option id="first">Layot</option>
        <option>Article</option>
        <option>Picture</option>
    </select>
    
</form>


</body>
</html>
PM MAIL   Вверх
dsCode
Дата 2.10.2007, 12:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26
diez, 

1. setAttribute пишется с двумя "t"
2. var text = document.createTextNode(selText); и далее obj.appendChild(text) не доступно для чекбоксов. Для линков, например, подойдет.


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
fidres
Дата 2.10.2007, 12:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 159
Регистрация: 15.11.2006

Репутация: нет
Всего: 1
Код
<html>
<head>
<script>
<!--
  function showSelected(a){ 
   var t='<input type=checkbox name=text>'+a+'</input><br>';
    document.getElementsByTagName("FORM")[0].innerHTML=document.getElementsByTagName("FORM")[0].innerHTML+t;
  }
//-->
</script>
</head>
<body>
<form action="test.php" method="post">
    <select name="object_type" onChange="JavaScript:showSelected(this.options[this.selectedIndex].text)">
        <option selected>Layot
        <option>Article
        <option>Picture
    </select><hr>
</form>
</body>
</html>
так пойдёт?

Это сообщение отредактировал(а) fidres - 2.10.2007, 12:49
--------------------
Исправьте ошибку в слове <ХЕРОШО> и я скажу Вам оптимист Вы или пессимист.
PM ICQ   Вверх
fidres
Дата 6.10.2007, 18:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 159
Регистрация: 15.11.2006

Репутация: нет
Всего: 1
кстати.
можно ещё короче записать
Код
document.getElementsByTagName("FORM")[0].innerHTML+=t;


Это сообщение отредактировал(а) fidres - 6.10.2007, 18:40
--------------------
Исправьте ошибку в слове <ХЕРОШО> и я скажу Вам оптимист Вы или пессимист.
PM ICQ   Вверх
bronenos
Дата 7.10.2007, 23:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 52
Регистрация: 4.7.2007

Репутация: нет
Всего: нет
можно и еще короче ;)
PM MAIL   Вверх
SelenIT
Дата 7.10.2007, 23:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401
...все равно работать не будет;) (см. ответ dsCode).

А вот так работает:
Код

    function showSelected(a) 
    { 
        var selNum = a.object_type.selectedIndex; 
        var selText = a.object_type.options[selNum].text;
    
            var label = document.createElement("LABEL");
            var input = document.createElement("INPUT");
            input.setAttribute("type","checkbox");
            input.setAttribute("name","test[]");
            input.setAttribute("value",selText);
            label.appendChild(input);
            label.appendChild(document.createTextNode(selText));
            document.getElementsByTagName("FORM")[0].appendChild(label);
            
    }


Это сообщение отредактировал(а) SelenIT - 7.10.2007, 23:16


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
fidres
Дата 9.10.2007, 03:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 159
Регистрация: 15.11.2006

Репутация: нет
Всего: 1
Цитата(bronenos @  7.10.2007,  23:01 Найти цитируемый пост)
можно и еще короче ;) 
покажи как
Цитата(SelenIT @  7.10.2007,  23:10 Найти цитируемый пост)
все равно работать не будет
у меня ж работает в IE.
в фоксе правда глючит слегка, но чеки лепит. (глюк в том, что на OnChange весит и первый пункт ВСЕГДА выбран и сменить его НИКАК не получается. так что нужно выбирать другое событие, либо СОЗДАТЬ дополнительную функцию, котораяю будет проверять индекс выбраного пункта и создавать чек, если выбран первый пункт)
в опре и мозиле такая же хрень - первый пункт выпадающего меню ВСЕГДА остаётся выбранным (даже если вы тыкнули на любой другой!)...
а вот в максторе - всё работает как положено! пункты выбранные в меню - остаются выбранными даже после закрытия меню.
в опре и мозиле можно сделать пустой пункт меню (или пункт с текстом "выбор...". причём сделать его последним пунктом! тогда не придётся проверять выбранный пункт) и проверять текст выбраной позиции.

Код
<html>
<head>
<script>
<!--
  function showSelected(a){
   if(a!='select...'){ // проверка предназначена для того, чтоб в IE и совместимых обозревателях не создавался чекбокс с текстом 'select...'
    var t='<input type=checkbox name=text>'+a+'</input><br>';
     document.getElementsByTagName("FORM")[0].innerHTML+=t;
   }
  }
//-->
</script>
</head>
<body>
<form action="test.php" method="post">
    <select name="object_type" onChange="JavaScript:showSelected(this.options[this.selectedIndex].text)">
        <option>Layot
        <option>Article
        <option>Picture
        <option selected>select...
    </select><hr>
</form>
</body>
</html>
у меня во всех мною перечисленных обозревателях сработало. не знаю как у других.
--------------------
Исправьте ошибку в слове <ХЕРОШО> и я скажу Вам оптимист Вы или пессимист.
PM ICQ   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0945 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.