PHP jQuery Data-Attribute填充下拉列表

时间:2015-01-29 02:38:25

标签: php jquery modal-dialog custom-data-attribute

我有一个HREF,其中包含来自PHP查询并加载到表中的各种数据属性(大约8个)。当你单击按钮时,它通过jQuery获取数据属性并将它们发送到模态窗口,我可以在窗口中使用它们。

我可以打开窗口并将属性放入INPUT字段,没有任何问题。

我想要做的是将属性放在SELECT下拉列表的第一个OPTION中。

以下是具有以下属性的按钮:

 <tr><td><a href='' class='modAccount' 
    data-modcode=".$row[partner_code]." 
    data-modname=\"".$row[partner_name]."\" 
    data-boiler=\"".$row[boilerplate]."\" 
    data-surcharges=\"".$row[no_new_surcharges]."\" 
    data-ccalog=\"".$row[cca_logistics]."\"  
    data-toggle='modal'>Click</a></td></tr>

我有很多数据属性。我不得不为这个问题消除一些。

这是用于检索数据属性的jQuery,并将它们发送到名为modifyModal的模态窗口。

这是jQuery:

 $(function()
 {
   $('.modAccount').click(function(e)
   {
     e.preventDefault();
     $partnerCode = $(this).attr('data-modcode');
     $partnerName = $(this).attr('data-modname');
     $boiler = $(this).attr('data-boiler');
     $surcharges = $(this).attr('data-surcharges');
     $ccalog = $(this).attr('data-ccalog');
       // the 5 below currently populate the INPUT fields for the ID's listed
     $('#modpartnerCode').val($partnerCode);  
     $('#modpartnerName').val($partnerName);
     $('#modplatform').val($platform);  // <- should go to dropdown
     $('#modboiler').val($boiler);  // <- should go to dropdown
     $('#modsurcharges').val($surcharges);  // <- should go to dropdown
   });
 });    
 $(document).on("click", ".modAccount", function () 
 {
   $('#modifyModal').modal('show');
 });    

正如您在上面的注释中所读到的那样,我可以使用各自的ID将属性发送到INPUT字段。

我需要能够填充下拉SELECT字段的第一个OPTION。

我认为我不需要显示MODAL窗口代码。如上所述,我可以使用我列出的ID来填充INPUT字段。

如何获取ID以填充下拉SELECT第一个OPTION值?

以下是模态的代码:

 <div class="modal fade" id="modifyModal" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
 </div>
 <div class="modal-body">
 <form role="form" action="api/modifyAcct.php" method="get" id="modAcctForm" name="modAcctForm">
 <input readonly type="text" class="form-control" id="modpartnerName" name="modpartnerName" />
 <input readonly type="text" class="form-control" id="modpartnerCode" name="modpartnerCode" />
 <select class="form-control" id="modboiler" name="modboiler" />
   <option value=""></option> // <- #modboiler goes here
   <option value="Y">Yes</option>
   <option value="N">No<option>
 </select>
 <select class="form-control" id="modsurcharges" name="modsurcharges" />
   <option value=""></option> // <- #modsurcharges goes here
   <option value="Y">Yes</option>
   <option value="N">No</option>
 </select>
 <select class="form-control" id="modplatform" name="modplatform" />
   <option value=""></option> // <- #modplatform goes here
   <option value="Y"></option>
   <option value="N"></option>
 </select>
 </div>
 </div>
 </div>
 </div>

1 个答案:

答案 0 :(得分:1)

使用jquery选择第一个选项并设置值。

$('#modplatform option:first').val($platform);
$('#modboiler option:first').val($boiler);
$('#modsurcharges option:first').val($surcharges);