Question

好吧所以我试图使用javascript动态创建一个选择列表，基本上当有人点击汽车制造时，模型选择下拉需要填充特定品牌的模型，这是我到目前为止，它是非常的业余的，请原谅。

以下是我对Javascript的尝试：

function makeModel(obj){ 
 model = new Array();
 model[0] = new Array( 'ANY' );
 model[1] = new Array( '212', 'Ace', 'Aceca', 'Cobra', 'Superblower');
 model[2] = new Array( '145', '146', '147', '147 3 Door', '147 5 Door', '155', '156', '159', '164', '166', '33', '75', '90', 'Alfasud', 'Alfetta', 'Arna', 'Brera', 'GT', 'GTV', 'Giulietta', 'Gold Cloverleaf', 'Mito', 'SZ', 'Spider', 'Sprint');
 model[3] = new Array( 'Rocsta');
 model[4] = new Array( 'DB7', 'DB9', 'DBS', 'Lagonda', 'V8', 'V8 Vantage', 'V8 Vantage Roadster', 'Vanquish', 'Vantage', 'Virage', 'Volante');
 model[5] = new Array( '100', '200', '400', '500', '80', '90', 'A2', 'A3', 'A4', 'A4 Avant', 'A4 Cabriolet', 'A4 Sedan', 'A5', 'A6', 'A8', 'Allroad', 'Cabriolet', 'Convertible', 'Coupe', 'Q5', 'Q7', 'Quattro', 'R8', 'RS2 Avant', 'RS4 Avant', 'RS4 Quattro', 'RS6', 'S2', 'S3', 'S4', 'S5', 'S6', 'S8', 'TT', 'Turbo');
 model[6] = new Array( 'Allegro', 'Ambassador', 'Healey', 'Maestro', 'Maxi', 'Metro', 'Mini', 'Montego', 'Princess');
 model[7] = new Array( '1 Series', '1 Series 3 Door', '1 Series 5 Door', '1 Series Convertible', '1 Series Coupe', '3 Series', '3 Series Compact', '3 Series Convertible', '3 Series Coupe', '3 Series E46 2000-2005', '3 Series Sedan', '3 Series Touring', '5 Series', '5 Series GT', '6 Series', '7 Series', '8 Series', 'M Coupe', 'M1', 'M3', 'M5', 'M6', 'X1', 'X3', 'X5', 'X6', 'Z1', 'Z3', 'Z4', 'Z8');
 model[8] = new Array( 'Valiant');
 model[9] = new Array( 'Buggy');
 model[10] = new Array( 'Arnage', 'Azure', 'Brooklands', 'Continental', 'Corniche', 'Eight', 'Mulsanne', 'Series II', 'Turbo R', 'Turbo RT');

 var curSel=obj.options[obj.selectedIndex].value ;
 var x;

 document.write("<select name=\"test\" id=\"test\">");
 for (x in model[curSel])
 {
 document.write("<option>" + mycars[curSel][x] + "</option>");
 }
 document.write("</select>");


}

这是HTML：

<p>
  <label for="make">Make: </label>
  <select name="make" id="make" onchange="makeModel(this);">
    <option>Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</p>

我遇到的问题是，当我在制作列表中选择一个选项时，页面变为空白并且它会继续加载某些内容，而我所看到的只是一个小小的下拉dox，其中没有任何内容。

现在我假设我需要定位一个特定元素并在那个内部生成选择列表？

提前Thanx！

Answer 1

有很多方法可以解决这个问题：

有一个空的DIV并且定位其innerHTML属性
在'make'选择下有一个select元素，其中样式属性display设置为none。在选择make时，您可以使用new Option(val, text)动态填充此隐藏的选择，并将其display属性重置为block

Answer 2

首先，我个人建议使用像jQuery这样的js库来更轻松地操作页面。这样您就可以非常轻松地在页面上找到元素并添加新内容并使用它执行许多其他操作。

其次，在页面加载后，document.write总是一个坏主意。我刚刚注意到anirvan-majumdar在我打字的时候发布了一个答案，并提供了一个很好的例子，说明如何在不使用外部库的情况下完成它。

使用javascript生成表单选择不起作用

2 个答案: