Question

我在html中创建了一个下拉列表，你可以看到我的代码，我想在html中添加（添加更多）按钮如果用户想要为更多值添加更多下拉列表，可以通过（添加更多）按钮添加。以及我们如何将这些下拉列表中的选定值存储在变量中。通过SQL查询从表中检索数据。

＆＃13;

Java script code 

<script>
$(document).ready(function ()
{

    $(document).on('change', '.text-two', function ()
    {   // when the attraction_OR_activity dropdown is selected
        //var S1value = $(this).parents('.multi-field');
        //$(S1value).find('.').html(''); // emptying the selections of 3rd dropdown list if there was any selections were made before.

        /* saving selected values in variables */
        var selected_scondition = $(scondition).find('.text-one :selected').val();
        var selected_S1value = $(S1value).find('.text-two :selected').val();

        //colombo_attractions = new Array("Ganga Ramaya", "National Art Gallery", "Galle Face Green", "Arcade Indepentent Square");
        //colombo_activities = new Array("City Walk 2016", "Traditional Dance Competition 2016", "Local Spicy food");

       /* if (selected_destination == 'colombo' && selected_attraction_or_activity == 'attraction') {
            colombo_attractions.forEach(function (t) {
                $(destination).find('.populated_attr_or_activity').append('<option>' + t + '</option>');
            });
        }

        if (selected_destination == 'colombo' && selected_attraction_or_activity == 'activity') {
            colombo_activities.forEach(function (t) {
                $(destination).find('.populated_attr_or_activity').append('<option>' + t + '</option>');
            });
        }*/


    });

    /* ADD DESTINATION */
    $('.multi-field-wrapper').each(function ()
    {
        var $wrapper = $('.multi-fields', this);
        var x = 1;
        $(".add-field", $(this)).click(function (e)
        {
            x++;
            $($wrapper).append(
              '<div class="multi-field">
      &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <select class="text-one" name="Scondition[]" >
             <label><option value="AND" >AND</option></label>
             <label><option value="OR" >OR</option></label>
             <label><option value="AND NOT">NOT</option></label>
        </select>&emsp;&nbsp;
        
        <select class="text-two" name="S1value[]" >
        <label><option value="Claim"  >Claim - C</option></label>
        <label><option value="Title"  >Title - T</option></label>
        <label><option value="Description" >Description - D</option></label>
        <label><option value="Abstract" >Abstract - A</option></label>
        <label><option value="Application_No" >Application_Number - APN</option></label>
        <label><option value="Priority_Number"  >Priority_Number - PN</option></label>
        <label><option value="Record_Number" >Record_Number - RN</option></label>
        <label><option value="Priority_Date" >Priority_Date - PD</option></label>
        <label><option value="Application_Date">Application date</option></label> 
        <label><option value="Publication_Date"  >Publication_Date - PD</option></label>
        <label><option value="US_Class"  >US_Class - USC</option></label>
        <label><option value="IPC_Class" >IPC_Class - IPC</option></label>
        <label><option value="CPC_Class" >CPC_Class - CPC</option></label>
        <label><option value="Priority_Country_Code"  >Priority Country Code - PCC</option></label>
        <label><option value="Designate_States" >Designate_States - DS</option></label>
        <label><option value="Legal_Status_Current" >Legal_Status_Current - LSC</option></label>
        </select> 
     </div>
     <input type="text" placeholder="Enter your query here " name="Vname" value="<?php if(isset($_POST['Vname'])) { echo htmlentities($_POST['Vname']);
}?>" size="60" required /></div>');
        });

             $($wrapper).on("click", ".remove_field", function (e)
             { //user click on remove text
                  e.preventDefault(); $(this).parent('div').remove(); x--;
              })
    });
});
</script>

＆＃13;

HTML CODE

div class="multi-field-wrapper">
      <button type="button" class="add-field">Add More</button>        
      <div class="multi-fields">
      <div class="multi-field">
      &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <select class="text-one" name="Scondition[]" >
             <label><option value="AND" >AND</option></label>
             <label><option value="OR" >OR</option></label>
             <label><option value="AND NOT">NOT</option></label>
        </select>&emsp;&nbsp;
        
        <select class="text-two" name="S1value[]" >
        <label><option value="Claim"  >Claim - C</option></label>
        <label><option value="Title"  >Title - T</option></label>
        <label><option value="Description" >Description - D</option></label>
        <label><option value="Abstract" >Abstract - A</option></label>
        <label><option value="Application_No" >Application_Number - APN</option></label>
        <label><option value="Priority_Number"  >Priority_Number - PN</option></label>
        <label><option value="Record_Number" >Record_Number - RN</option></label>
        <label><option value="Priority_Date" >Priority_Date - PD</option></label>
        <label><option value="Application_Date">Application date</option></label> 
        <label><option value="Publication_Date"  >Publication_Date - PD</option></label>
        <label><option value="US_Class"  >US_Class - USC</option></label>
        <label><option value="IPC_Class" >IPC_Class - IPC</option></label>
        <label><option value="CPC_Class" >CPC_Class - CPC</option></label>
        <label><option value="Priority_Country_Code"  >Priority Country Code - PCC</option></label>
        <label><option value="Designate_States" >Designate_States - DS</option></label>
        <label><option value="Legal_Status_Current" >Legal_Status_Current - LSC</option></label>
        </select> 
     </div>
  <input type="text" placeholder="Enter your query here " name="Vname" value="<?php if(isset($_POST['Vname'])) { echo htmlentities($_POST['Vname']);  // always filter outputs of external data
}
?>" size="60" required />
  </div>

＆＃13;

我想通过（添加更多）添加相同下拉列表并将所选值存储在变量中。

我们如何创建为html中的Dropdown列表添加更多按钮以及如何在变量中存储选定值表单下拉列表的值？

0 个答案: