2012-06-21 4 views
0

Я создал раскрывающийся список с javascript, и я заполняю его получением данных из базы данных MySQL.<input></input> in innerHTML не работает

Проблема в том, что я не могу разместить раскрывающийся список в коде innerHTML.

Это то, что я написал, чтобы создать выпадающий список с JS:

var mySpan = document.getElementById('myDiv'); 

var myLine = document.getElementById('testcat'); 
myLine.value++; 

// Create select 
var selection = document.createElement('select'); 
selection.setAttribute('name',"category[]"); 
mySpan.appendChild(selection); 

// Create Option 
createSelectOption(selection); 

// Create the container 
var ni = document.getElementById('myDiv'); 
ni.setAttribute('style', 'width:790px;'); 
........... 
........... 

Затем я создаю другие вещи, и для создания HTML-код, я использую:

newdiv.innerHTML = '<div class="table">.........</div>'; 
ni.appendChild(newdiv); 

Это часть в HTML:

// test dropdown list 
<input name="testcat" id="testcat" type="hidden" value="0" /> 
<div id="myDiv"></div> 

Я проверил мой выпадающий список, как вы можете увидеть в приведенном выше коде, и она работает, если я объявляю <input name="testcat" id="testcat" type="hidden" value="0" /> в HTML (я имею в виду в <body></body>), но если я использую тот же код в innerHTML, FireBug сообщает мне: «myLine is null; myLine.value ++;.?.»

Любая помощь

+2

Есть ли у вас какие-либо строки разрыва в вашем HTML? Также это очень НЕПРАВИЛЬНАЯ идея вставить HTML, используя методы 'innerHTML'' document.createElement' и 'appendChild'. – antyrat

+0

вы делаете их ** после ** страница завершила загрузку? Если нет, это не сработает –

+0

Вы пробовали его как самозакрывающийся тег '' (обратите внимание на косую черту перед закрывающим угловым кронштейном) ? –

ответ

0

Вы не можете присвоить элемент с идентификатором, используя innerHTML в тексте - идентификатор не зарегистрирует на DOM Вы должны сначала создать элемент, присвоить ему идентификатор, а затем поместить этот элемент в DOM

Вы могли бы найти это проще с помощью JQuery:.

var input = document.createElement("input"); 
input.id="testcat"; 
input.innerHTML = "testcat" ; 
$('somediv').appendChild(input); 
0

это то, что я сделал в моем старом коде:

var selectcat = document.createElement("select"); 
selectcat.name = "category[]"; 
selectcat.options[0] = new Option("",""); 
selectcat.options[1] = new Option("cat1","cat1"); 
selectcat.options[2] = new Option("cat2","cat2"); 
.......... 
.......... 
selectcat.options[12] = new Option("cat1","cat12"); 

И использовали:

newdiv.innerHTML = '<div class="table"><ul><li><select name="category[]"><option value=""></option><option value="cat1">cat1</option><option value="cat2">cat2</option></select></li></ul></div>'; 

Но теперь я должен получить значения из базы данных MySQL.

Так что я создал эту функцию:

function createSelectOption(element) 
    { 
     var objSelect = ele; 
     var Item = new Option("", ""); 
     objSelect.options[objSelect.length] = Item; 
     <? 
     while($categ = mysql_fetch_array($resultf_categ)) 
     { 
     ?> 
      var Item = new Option("<?=$categ["cat_name"];?>", "<?=$categ["cat_name"];?>"); 
      objSelect.options[objSelect.length] = Item; 
     <? 
     } 
     ?> 
    } 

Но до сих пор не понимаю, как я могу использовать непосредственно в моем innerHTML. Извините за глупые вопросы, но я действительно застрял здесь.

+0

ОК, я переписал весь код, удалил innerHTML и теперь сортировал. Дайте мне время, чтобы очистить код, и я отправлю свое решение. Спасибо всем за подсказки, особенно Антырат и Робби, спасибо. – Mark

+0

Следуя подсказкам, я переписал функцию, удалил innerHTML и создал все поля ввода и раскрывающийся список, например: '// Создать текст ввода (имя изображения) var namePic = document.createElement ('input'); namePic.setAttribute ('type', "text"); namePic.setAttribute ('name', "name []"); namePic.setAttribute ('id', "img_name" + myLine.value); mySpan.appendChild (namePic); \t // Создать выбор (DropDown List - Category) var cat = document.createElement ('select'); cat.setAttribute ('name', "category []"); cat.setAttribute ('id', "category" + myLine.value); mySpan.appendChild (cat); ' – Mark

Смежные вопросы