下拉菜单表，其中第二列的值取决于第一列值

我COPANY问我开发内部使用的一个网站。该网站包含一个包含多行和多列下拉菜单的表单。下拉菜单表，其中第二列的值取决于第一列值

第一列包含我们销售的产品类型，第二列包含设备的子类型。（例如：类型1 - 型号1，或类型1 - 模型2）

具有多个行是这样，我们可以在同一时间上载的多个设备的目的。到目前为止，我已经想出了这一点：

<tr><td><select name="category"> 
     <option value="0">-</option> 
     <option value="1">Type1</option> 
     <option value="2">Type2</option> 
     <option value="3">Type3</option> 
     <option value="4">Type4</option> 
    </select></td> 
    <td><select name="items"> 
     <option value="3">-</option> 
    </select> </td> </tr> 
    <tr><td><select name="category"> 
     <option value="0">-</option> 
     <option value="1">Type1</option> 
     <option value="2">Type2</option> 
     <option value="3">Type3</option> 
     <option value="4">Type4</option> 
    </select></td> 
    <td><select name="items"> 
     <option value="3">-</option> 
    </select> </td> </tr>

和脚本部分：

var categories = { 
    "-": [{value: '3',text: '-'}], 
    "Type1": [{value: '1',text: 'model1'}, {value: '2',text: 'model2'}], 
    "Type2": [{value: '4',text: 'model3'}, {value: '10',text: 'model4'}], 
    "Type3": [{value: '6',text: 'model5'},{value: '6',text: 'model6'}, {value: '7',text: 'model7'}], 
    "Type4": [{value: '8',text: 'model8'}, {value: '9',text: 'model9'}, {value: '11',text: 'model10'}, {value: '12',text: 'model11'}, {value: '13',text: 'DELUXE EDITION'}] 
}; 

function selectchange() { 
    var select = $('[name=items]'); 
    select.empty(); 

    $.each(categories[$(':selected', this).text()], function() { 
    select.append('<option value="' + this.value + '">' + this.text + '</option>'); 
    }); 
} 
$(function() { 
    $('[name=category]').on('change', selectchange); 
});

我不需要一个数据库，产品和型号列表不会显著改变。我的问题是：每当我更改第二排子型为例，第一排子类型更改为好。我应该在脚本中修改哪些内容以使每一行都单独运行？（最好的是，如果我能$ _ POST所有值作为一个数组）。

工作JFiddle例如这里： https://jsfiddle.net/L2cwqrus/

来源

2017-02-22 Bányász Jocó

它看起来既像你<select>元素对具有相同的名称。当你做$('[name=items]')，JQuery的选择匹配所有元素，然后您的通话.append()项目追加到两个下拉菜单。

她e是JSFiddle，它为每对下拉菜单使用不同的名称来说明一种解决方案：https://jsfiddle.net/prutbkr8/

来源

2017-02-22 19:40:18

名需要在每行不同的领域 - 例如，category_1，items_1，第2项，第2项。为了避免必须重复selectchange（）函数（例如，selectchange_1，selectchange_2等），向所有的category_xx字段添加一个类（例如class =“category”），而不是$（' （'change'...）使用$（'。category'）。on（'change'...并将ID从ID传递给selectchange（）。

来源

2017-02-22 19:37:50 manassehkatz

下拉菜单表，其中第二列的值取决于第一列值

回答

相关问题