Javascript 来自选择器的具有自适应表的Jquery表单

我需要你的帮助。试图在

php+jquery

中构建表单，但在某些功能上遇到问题。
例如，我有以下代码：

<form action="" method="post" id="multiform">
<!-- Product selector -->
<table class="multi" id="MultiRow">
<tr><td>
    <select name="store[product][]" required>
    <option value="" selected="selected">-Product-</option>
    <option value="430">OCTA</option>
    <option value="440">KASKO</option>
    <option value="19041">TRAVEL</option>
    <option value="19063">HOUSEHOLD</option>
    </select>
</td>
    <!-- /Product selector -->
</table>
    <input type="submit" value="ok">

但是对于日期选择器功能，我需要输入的id是唯一的，例如：id=“location1”，在下一个添加的行id=“location2”。

$（“#产品选择”）.change（函数（）{
var select=document.getElementById（“productselect”）；
var selecedproduct=select.options[select.selectedIndex].value；
$（“tr[id^='forselect']）；
如果（selecedproduct==430 | | selecedproduct==440）
{
var html=''；
html+=''；
html+=''；
html+=''；
$（“#多行”）.append（html）；
}
else if（selecedproduct==19041 | | selecedproduct==19063）
{
var html=''；
html+=''；
html+=''；
$（“#多行”）.append（html）；
}
});
deldatepicker=函数deldatepicker（id）
{
$（“#删除”+id）.remove（）；
}
adddatepicker=函数adddatepicker（）
{
var N=$（“输入[id^='location']）。长度；N++；
var html='delete datepicker'；
$（“#多行”）.append（html）；
$（“#位置”+N）.datepicker（）；
}
removetags=函数removetags（）
{
$（“tr[id^='forselect']）；
}

它可能对你的工作有帮助。

$（“#产品选择”）.change（函数（）{
var select=document.getElementById（“productselect”）；
var selecedproduct=select.options[select.selectedIndex].value；
$（“tr[id^='forselect']）；
如果（selecedproduct==430 | | selecedproduct==440）
{
var html=''；
html+=''；
html+=''；
html+=''；
$（“#多行”）.append（html）；
}
else if（selecedproduct==19041 | | selecedproduct==19063）
{
var html=''；
html+=''；
html+=''；
$（“#多行”）.append（html）；
}
});
deldatepicker=函数deldatepicker（id）
{
$（“#删除”+id）.remove（）；
}
adddatepicker=函数adddatepicker（）
{
var N=$（“输入[id^='location']）。长度；N++；
var html='delete datepicker'；
$（“#多行”）.append（html）；
$（“#位置”+N）.datepicker（）；
}
removetags=函数removetags（）
{
$（“tr[id^='forselect']）；
}

它可能对你的工作有帮助。

给你。 因为您需要ID是唯一的，所以我使用了Date.now（）和object.now.getutcmillesons（）。这将确保当您删除并重新插入具有相同行索引的另一行时，事件不会崩溃。那么剩下的就微不足道了

jQuery（文档）.ready（函数（）{
jQuery（'select'）。on（'change'，函数（e）{
var tr=jQuery（this）.closest（'tr'）.get（0）；
var单元=tr.insertCell（1）；
var now=Date.now（）；
开关（jQuery（'option:selected'，this）.val（））{
案件‘430’：
案件‘440’：
cell.innerHTML=“”；
打破
cell.innerHTMl=“”；
案件‘19041’：
案件‘19063’：
打破
}
})
});

-产品-
八度
卡斯科
旅行
家庭
在这里。
因为您需要ID是唯一的，所以我使用了Date.now（）和object.now.getutcmillesons（）。这将确保当您删除并重新插入具有相同行索引的另一行时，事件不会崩溃。那么剩下的就微不足道了


jQuery（文档）.ready（函数（）{
jQuery（'select'）。on（'change'，函数（e）{
var tr=jQuery（this）.closest（'tr'）.get（0）；
var单元=tr.insertCell（1）；
var now=Date.now（）；
开关（jQuery（'option:selected'，this）.val（））{
案件‘430’：
案件‘440’：
cell.innerHTML=“”；
打破
cell.innerHTMl=“”；
案件‘19041’：
案件‘19063’：
打破
}
})
});

-产品-
八度
卡斯科
旅行
家庭
谢谢！这几乎是我实际需要的，但我需要的是，不会有[Add datepicker]按钮，而是[Add Other product]按钮。我需要添加一个或多个产品，其中产品具有预定义的输入文件。datepicker将在产品领域做好准备。谢谢！这几乎是我实际需要的，但我需要的是，不会有[Add datepicker]按钮，而是[Add Other product]按钮。我需要添加一个或多个产品，其中产品具有预定义的输入文件。datepicker将在产品领域做好准备。
<td><input type="text" id="motor[]" name="multiarray[vehicle_type][]"></td>
<td><input type="text" id="deadline[]" name="multiarray[end_date][]"></td>
            <td><a class="del" href="#">DELETE BUTTON</a></td>

<td><input type="text" id="location[]" name="multiarray[travel_location][]"></td>
            <td><a class="del" href="#">DELETE BUTTON</a></td>

<a class="del" href="#">DELETE BUTTON</a>

    $("#productselect").change(function(){
 var select = document.getElementById("productselect");
var selecedproduct = select.options[select.selectedIndex].value;   
$("tr[id^='forselect']").remove();
if(selecedproduct==430 || selecedproduct==440 )
{
var html ='<tr id="forselect"><td><input type="text" id="motor[]" name="multiarray[vehicle_type][]"></td>';
html +='<td><input type="text" id="deadline[]" name="multiarray[end_date][]"></td>';
html +='<td><a class="del" OnClick="removetags();return false;" href="#">DELETE BUTTON</a></td></tr>';   
html +='<tr id="forselect"><td><a  href="#" OnClick="adddatepicker();return false;">add datepicker </a> </td></tr>';      
$("#MultiRow").append(html);

}
else if(selecedproduct==19041 || selecedproduct==19063 )
{
var html ='<tr id="forselect"><td><input type="text" id="location[]" name="multiarray[travel_location][]"></td>';
html +=' <td><a class="del" OnClick="removetags();return false;" href="#">DELETE BUTTON</a></td></tr>';
html +='<tr id="forselect"><td><a  href="#" OnClick="adddatepicker();return false;">add datepicker </a> </td></tr>';   


$("#MultiRow").append(html);
}


});

deldatepicker = function deldatepicker(id)
{
$("#remove"+id).remove();
}
adddatepicker = function adddatepicker()
{
var N = $("input[id^='location']").length;N++;    
var html ='<tr id="remove'+N+'"><td><input type="text"id="location'+N+'" placeholder="date"></td><td><button OnClick="deldatepicker('+N+')">delete datepicker </button> </td></tr>';
$("#MultiRow").append(html); 
$("#location"+N).datepicker();
}

removetags = function removetags()
{
$("tr[id^='forselect']").remove();  
}