Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > чекбокс с текстом

Автор: diez 2.10.2007, 10:22

Задача динамически сгенерировать чекбокс с текстом, полученым из 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>

Автор: dsCode 2.10.2007, 12:27

diez,

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

Автор: fidres 2.10.2007, 12:38

Код

<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 6.10.2007, 18:12

кстати.
можно ещё короче записать

Код

document.getElementsByTagName("FORM")[0].innerHTML+=t;

Автор: bronenos 7.10.2007, 23:01

можно и еще короче ;)

Автор: SelenIT 7.10.2007, 23:10

...все равно работать не будет;) (см. ответ 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);
            
    }

Автор: fidres 9.10.2007, 03:23

Цитата(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>

у меня во всех мною перечисленных обозревателях сработало. не знаю как у других.