Динамическое создание выпадающего списка в JavaScript с использованием HTML - PullRequest
Новая
       39

Динамическое создание выпадающего списка в JavaScript с использованием HTML

1 голос
/ 11 ноября 2011

Я хочу сделать очень простую вещь. Я хочу заполнить список раскрывающегося списка на основе значения первого раскрывающегося списка. Таким образом, эти 2 поля являются единственными элементами в таблице, которая динамически создает строки (по нажатию кнопки). Я новичок в html .. и провел почти 2 дня напрасно в этом ... Это код:

HTML код: 

  <table border="1" id="areas">

            <tr>
            <th colspan="3">Areas Serviced</th>
            </tr>

            <tr>

            <td>
            <select name='city1' id='city1' onChange="dynamic1(this,'txtRow1');">
            <option  value="">Please select a city</option>
                    <option value='Bangalore'> Bangalore </option>
            <option value='Mumbai'> Mumbai</option>
                </select>
            <option></option>
            </td>
            <td>
            <select name="txtRow1" id="txtRow1">
            <option value="">Please Select an area</option>
            <option></option>
            </select>
            </td>
            </tr>

            </table>

          <input type="button" value="Add another Area" onClick="addRowToTable();" /> <input type="button" value="Remove" onClick="removeRowFromTable();" />
            </br>
                            </br>
         <input type="submit" name="submit" id="submit" value="Submit" />

Javascript: 

function dynamic1(parent,child){

var parent_array = new Array();

parent_array[''] = ['Please select a city'];

parent_array['Bangalore'] = ['Marathahalli','Kadubeesanahalli'];

parent_array['Mumbai'] = ['Andheri','Santacruz'];

var thechild = document.getElementById(child);

thechild.options.length = 0;

var parent_value = parent.options[parent.selectedIndex].value;

if (!parent_array[parent_value]) parent_value = '';

thechild.options.length = parent_array[parent_value].length;

for(var i=0;i<parent_array[parent_value].length;i++){

    thechild.options[i].text = parent_array[parent_value][i];

    thechild.options[i].value = parent_array[parent_value][i];} }



function addRowToTable()
{
var tbl = document.getElementById('areas');
var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);


var col = document.createElement("TR"); 
var cell1 = document.createElement("TD"); 

var txt0= document.createTextNode(iteration);
var combo1=document.createElement("select");
var combo11=document.createElement("option");
var combo12=document.createElement("option");
var combo2=document.createElement("select");
var combo21=document.createElement("option");
var combo22=document.createElement("option");
var id2=combo2.id;


combo1.setAttribute("name","city");
combo1.setAttribute("onChange","dynamic1(this,id2);");
combo11.setAttribute("value","Bangalore");
combo11.innerHTML="Bangalore";

combo12.setAttribute("value","Mumbai");
combo12.innerHTML ="Mumbai";


combo2.setAttribute("name","area");
combo2.setAttribute("id","txtRow"+iteration);

combo1.appendChild(combo11);
combo1.appendChild(combo12);
combo2.appendChild(combo21);
combo2.appendChild(combo22);


var cell2 = document.createElement("TD"); 
cell2.appendChild(combo1);
var cell3 = document.createElement("TD"); 
cell3.appendChild(combo2);

col.appendChild(cell2);
col.appendChild(cell3);

tbl.appendChild(col); 

}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

Этот код не работает.

Альтернативный код Javascript: 

  function SetMedia(objCity,iteration) {
var objArea = document.getElementById("txtRow"+iteration);
objArea.options.length = 0;
    objArea.disabled = false;
switch (objCity.value) {
case "Bangalore":
    objArea.options.add(new Option("Marathahalli"));
    objArea.options.add(new Option("Kadubeesanahalli"));
    break;
case "Mumbai":
    objArea.options.add(new Option("Andheri"));
    objArea.options.add(new Option("Santacruz"));
    break;
default:
    objArea.options.add(new Option("select"));
    objArea.disabled = true;
    break;
}
}

function addRowToTable()
{
var tbl = document.getElementById('areas');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;


var col = document.createElement("TR"); 
var cell1 = document.createElement("TD"); 

var txt0= document.createTextNode(iteration);
var combo1=document.createElement("select");
var combo11=document.createElement("option");
var combo12=document.createElement("option");
var combo2=document.createElement("select");
var combo21=document.createElement("option");
var combo22=document.createElement("option");

combo1.id="city"+iteration;
var id1=combo1.id;
combo2.id="txtRow"+iteration;
var id2=combo2.id;

combo1.setAttribute("name","city");
combo1.onChange=func(){SetMedia(id1,iteration);}
combo11.setAttribute("value","Bangalore");
combo11.innerHTML="Bangalore";

combo12.setAttribute("value","Mumbai");
combo12.innerHTML ="Mumbai";


combo2.setAttribute("name","area");
combo2.setAttribute("id","txtRow"+iteration);

combo1.appendChild(combo11);
combo1.appendChild(combo12);
combo2.appendChild(combo21);
combo2.appendChild(combo22);


var cell2 = document.createElement("TD"); 
cell2.appendChild(combo1);
var cell3 = document.createElement("TD"); 
cell3.appendChild(combo2);

col.appendChild(cell2);
col.appendChild(cell3);

tbl.appendChild(col); 

}

По сути, я не могу связать динамически созданный объект (раскрывающийся номер 2) с раскрывающимся номером 1, поскольку я не могу получить идентификаторы элементов, сгенерированных динамически ...

После этого мне также нужно использовать эти значения, введенные в другом PHP-скрипте, используя POST ...

Ответы [ 2 ]

0 голосов
/ 11 ноября 2011

Эта часть не работает. Вы не можете записать в свойство .length массива или коллекции. 

thechild.options.length = 0;

var parent_value = parent.options[parent.selectedIndex].value;

if (!parent_array[parent_value]) parent_value = '';

thechild.options.length = parent_array[parent_value].length;

for(var i=0;i<parent_array[parent_value].length;i++){

    thechild.options[i].text = parent_array[parent_value][i];

    thechild.options[i].value = parent_array[parent_value][i];} }

заменить на 

while (thechild.options[0]) thechild.removeChild(thechild.options[0]);

var parent_value = parent.options[parent.selectedIndex].value;

if (parent_array[parent_value]) {
  for(var i=0;i<parent_array[parent_value].length;i++){
      var o = document.createElement('option');
      o.text = parent_array[parent_value][i];
      o.value = parent_array[parent_value][i];} }
      thechild.appendChild(o);
  }
}
0 голосов
/ 11 ноября 2011

В первом javascript вы пытаетесь прочитать атрибут id combo2 до того, как его установите.

Во втором javascript вы просто добавляете два пустых параметра в элемент select (combo2).

...