Question

我有一个下拉选择器，需要根据选择加载表单的其他部分。这是我到目前为止所得到的：

$('#mySelector').change(function(){
    var $selectForm = '#' + $(this).val();
    $('#fLoad').load('formParts.html ' + $selectForm );
});

<select id="mySelector">
   <option value="o1">Car details
   <option value="o2">Boat details
   <option value="o3">Train details
</select>

我将表单的部分内容存储到外部HTML formParts.html

<div id="o1">
    <label for="f1_1">Car speed</label>
    <input id="f1_1" type="text">
    <br>
    <label for="f1_2">Car color</label>
    <input id="f1_2" type="text">
</div>

<div id="o2">
    <label for="f2_1">Boat size</label>
    <input id="f2_1" type="text">
    <br>
    <label for="f2_2">Boat weight</label>
    <input id="f2_2" type="text">
</div>

<div id="o3">
    <label for="f3_1">Train length</label>
    <input id="f3_1" type="text">
    <br>
    <label for="f3_2">Train cargo</label>
    <input id="f3_2" type="text">
</div>

无论我的选择如何，它似乎都会加载部分但只加载第一个div。我错过了什么？

Answer 1

这是工作代码： 您的选项标签格式不正确

<select id="mySelector">
        <option value="0">Select</option>
        <option value="o1">Car details</option>
        <option value="o2">Boat details</option>
        <option value="o3">Train details</option>
    </select>

formParts.html ：您的html代码格式不正确。

<div id="o1">
        <label for="f1_1">Car speed</label>
        <input id="f1_1" type="text" />
        <br />
        <label for="f1_2">Car color</label>
        <input id="f1_2" type="text" />
    </div>

    <div id="o2">
        <label for="f2_1">Boat size</label>
        <input id="f2_1" type="text" />
        <br />
        <label for="f2_2">Boat weight</label>
        <input id="f2_2" type="text" />
    </div>

    <div id="o3">
        <label for="f3_1">Train length</label>
        <input id="f3_1" type="text" />
        <br />
        <label for="f3_2">Train cargo</label>
        <input id="f3_2" type="text" />
    </div>

需要帮助jQuery load（）

1 个答案: