Question

我目前正在开发一个提供自定义菜单部分的网站。

有5个单独的下拉框，每个下拉框中都包含一个单独的列表。每个列表框中都添加了一个加号框，当点击加号框时，它意味着在它下面添加另一个列表框（从它添加的列表框中的相同列表数据）。

我遇到的问题是所有加号都有效，但只添加“启动选项”部分下的列表框，并且只使用“启动选项”数据。所以我需要它才能工作，如果从“早餐选项”中点击一个加号，它会在它下面添加相同的列表框。然后，如果在“入门选项”部分单击加号框，则会在其下方添加一个框，依此类推。

我为每个部分区域制作了一个单独的JS，我想知道这是否是问题，它需要是一个脚本，但我不确定。这是代码的当前工作部分 http://khushicatering.co.uk/menu_fi.php。我将为表单和JS添加下面的代码。

HTML表格

                    <div id="splitter">
                      <table width="250" border="0">
                        <tr>
                          <td width="311"><span class="asdwd">
                            <label>Breakfast Menu</label>
                          </span></td>
                        </tr>
                        <tr>
                          <td><div id="break"></div>
                            <select name="text[]">
                              <option value="Bhature ">Bhature </option>
                              <option value="Chana Amrtisari">Chana Amrtisari</option>
                              <option value="Masala Dhai">Masala Dhai</option>
                              <option value="Mithai">Mithai</option>
                              <option value="Palak Pakora">Palak Pakora</option>
                              <option value="Paranthe">Paranthe</option>
                              <option value="Punjabi Samosa">Punjabi Samosa</option>
                              <option value="&lt;none&gt;">&lt;none&gt;</option>
                            </select>
                            <input type="button" id="submit2" onClick="addNew();"
       value=" + ">
                            </p>
                            <p>&nbsp;</p></td>
                        </tr>
                      </table>
                    </div> <div id="splitter">
                      <table width="250" border="0">
                        <tr>
                          <td width="250"><span class="asdwd">
                            <label>Starter Options</label>
                          </span></td>
                        </tr>
                        <tr>
                          <td><div id="start"></div>
                            <select name="text[]">
                              <option value="Aloo Tikki">Aloo Tikki</option>
                              <option value="Channa Masala">Channa Masala</option>
                              <option value="Chicken Pakora ">Chicken Pakora </option>
                              <option value="Chicken Seekh Kebabs">Chicken Seek   Kebabs</option>
                              <option value="Chicken Tikka Malai">Chicken Tikka Malai</option>
                              <option value="Chicken Tikka Masala">Chicken Tikka Masala</option>
                              <option value="Chilli Chicken">Chilli Chicken</option>
                              <option value="Chilli Mogo ">Chilli Mogo </option>
                              <option value="Chilli Paneer">Chilli Paneer</option>
                              <option value="Cocktail Vegetable Samosa">Cocktail Vegetable Samosa</option>
                              <option value="Cocktail Vegtable Spring Roll">Cocktail Vegtable Spring Roll</option>
                              <option value="Daal Kachori">Daal Kachori</option>
                              <option value="Fish Pakora">Fish Pakora</option>
                              <option value="Garlic Mushrooms ">Garlic Mushrooms </option>
                              <option value="Gobi Pakora">Gobi Pakora</option>
                              <option value="Hara Bara Tikki">Hara Bara Tikki</option>
                              <option value="Jeera Chicken ">Jeera Chicken </option>
                              <option value="Keema Bhuna">Keema Bhuna</option>
                              <option value="Keema Samosa">Keema Samosa</option>
                              <option value="Keema Spring Roll">Keema Spring Roll</option>
                              <option value="Lamb Seekh Kebabs">Lamb Seekh Kebabs</option>
                              <option value="Masala Chips ">Masala Chips </option>
                              <option value="Masala Lamb Chops">Masala Lamb Chops</option>
                              <option value="Masala Fried Prawns">Masala Fried Prawns</option>
                              <option value="Mutter Keema">Mutter Keema</option>
                              <option value="Palak Pakora">Palak Pakora</option>
                              <option value="Paneer Spring Rolls">Paneer Spring Rolls</option>
                              <option value="Paneer Pakora">Paneer Pakora</option>
                              <option value="Spicy Noodles">Spicy Noodles</option>
                              <option value="Thai Fish Cake">Thai Fish Cake</option>
                              <option value="Tandoori Chicken Tikka ">Tandoori Chicken Tikka </option>
                              <option value="Vegetable Samosa">Vegetable Samosa</option>
                              <option value="Vegetable Spring Roll">Vegetable Spring Roll</option>
                              <option value="Vegetable Tikki">Vegetable Tikki</option>
                              <option value="&lt;none&gt;">&lt;none&gt;</option>
                            </select>
                            <input type="button" id="submit2" onClick="addNew();" value=" + ">
                            </p>
                            <p>&nbsp;</p></td>
                        </tr>
                      </table>
                    </div> <div id="splitter">
                      <table width="250" border="0">
                        <tr>
                          <td width="250"><span class="asdwd">
                            <label>Mains Options</label>
                          </span></td>
                        </tr>
                        <tr>
                          <td><div id="start"></div>
                            <select name="text[]">
                              <option value="Aloo Bengan">Aloo Bengan</option>
                              <option value="Aloo Gobi">Aloo Gobi</option>
                              <option value="Aloo Methi">Aloo Methi</option>
                              <option value="Aloo Mutter">Aloo Mutter</option>
                              <option value="Aloo Palak ">Aloo Palak </option>
                              <option value="Bhindi Masala">Bhindi Masala</option>
                              <option value="Bombay Aloo">Bombay Aloo</option>
                              <option value="Butter Chicken">Butter Chicken</option>
                              <option value="Channa Curry ">Channa Curry </option>
                              <option value="Chicken Curry">Chicken Curry</option>
                              <option value="Chicken Jalfrazi">Chicken Jalfrazi</option>
                              <option value="Chicken Tikka Masala">Chicken Tikka Masala</option>
                              <option value="Daal Makhani">Daal Makhani</option>
                              <option value="Dum Aloo ">Dum Aloo </option>
                              <option value="Karahi Chicken">Karahi Chicken</option>
                              <option value="Keema Mutter">Keema Mutter</option>
                              <option value="King Prawn Masala">King Prawn Masala</option>
                              <option value="Lamb Curry ">Lamb Curry </option>
                              <option value="Lamb Jalfrezi">Lamb Jalfrezi</option>
                              <option value="Lamb Kofta">Lamb Kofta</option>
                              <option value="Lamb Rogan Josh">Lamb Rogan Josh</option>
                              <option value="Mah Moth Daal ">Mah Moth Daal </option>
                              <option value="Makhani Paneer">Makhani Paneer</option>
                              <option value="Malai Kofta">Malai Kofta</option>
                              <option value="Masala Macchi ">Masala Macchi </option>
                              <option value="Masar Daal">Masar Daal</option>
                              <option value="Methi Chicken">Methi Chicken</option>
                              <option value="Methi Gosht">Methi Gosht</option>
                              <option value="Mixed Vegetable Sabji">Mixed Vegetable Sabji</option>
                              <option value="Mutter Paneer">Mutter Paneer</option>
                              <option value="Palak Chicken">Palak Chicken</option>
                              <option value="Palak Gosht">Palak Gosht</option>
                              <option value="Palak Paneer">Palak Paneer</option>
                              <option value="Paneer Jalfrezi">Paneer Jalfrezi</option>
                              <option value="Shahi Paneer">Shahi Paneer</option>
                              <option value="Tarka Daal">Tarka Daal</option>
                              <option value="Vegetable Kofta">Vegetable Kofta</option>
                              <option value="&lt;none&gt;">&lt;none&gt;</option>
                            </select>
                            <input type="button" id="submit2" onClick="addNew();" value=" + ">
                            </p>
                            <p>&nbsp;</p></td>
                        </tr>
                      </table>
                    </div>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <tr>
                      <td colspan="2" rowspan="3">

            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <table width="563" border="0" align="left">
              <tr>
                <td width="274"><span class="asdwd">
                  <label>Dessert Options</label>
                </span></td>
                <td width="279"><span class="asdwd">
                  <label>Accompliments Options</label>
                </span></td>
              </tr>
              <tr>
                <td><div id="des"></div>
                  <select name="text[]2">
                    <option value="Desset**">Desset**</option>
                    <option value="Fruit Salad">Fruit Salad</option>
                    <option value="Gajar Ka Halwa">Gajar Ka Halwa</option>
                    <option value="Gulab Jaman">Gulab Jaman</option>
                    <option value="Kulfi">Kulfi</option>
                    <option value="Rasmalia">Rasmalia</option>
                    <option value="&lt;none&gt;">&lt;none&gt;</option>
                  </select>
                  <input type="button" id="submit2" onClick="addNew();" value=" + ">
                  </p>
                  <p>&nbsp;</p></td>
                <td><div id="accomp"></div>
                  <select name="text[]2">
                    <option value="Bhatura ">Bhatura </option>
                    <option value="Cucumber Cumin Raita Yoghurt">Cucumber Cumin Raita                                       Yoghurt</option>
                    <option value="Jeera Rice">Jeera Rice</option>
                    <option value="Mixed Vegetable Rice">Mixed Vegetable Rice</option>
                    <option value="Paratha">Paratha</option>
                    <option value="Pilau Rice">Pilau Rice</option>
                    <option value="Plain Natural Yoghurt ">Plain Natural Yoghurt </option>
                    <option value="Plain Rice">Plain Rice</option>
                    <option value="Puri">Puri</option>
                    <option value="Roti">Roti</option>
                    <option value="Salad Dhai Yoghurt">Salad Dhai Yoghurt</option>
                    <option value="Tandoori Naan">Tandoori Naan</option>
                    <option value="&lt;none&gt;">&lt;none&gt;</option>
                  </select>
                  <input type="button" id="submit2" onClick="addNew();" value=" + ">
                  </p>
                  <p>&nbsp;</p></form></td>
              </tr>

JS Breakfast Opt

var counter = 0;

function addNew(e) {

 var countAll = document.getElementsByTagName("select").length - 1;

  var lastSelectBox = document.getElementsByTagName("select")[countAll];

  var items = lastSelectBox.innerHTML;

 // Get the main Div in which all the other divs will be added
 var mainContainer = document.getElementById('break');

// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');

// Create a new text input

var newText = document.createElement('select');
newText.type = "select"; 
newText.setAttribute("name", "text[]");

newText.innerHTML = items;


 // Create buttons for creating and removing inputs
 var newAddButton = document.createElement('input');
  newAddButton.type = "button";
  newAddButton.value = " + ";
  newAddButton.id = "submit2";


  // Append new text input to the newDiv
 newDiv.appendChild(newText);

  // Append new button inputs to the newDiv
  newDiv.appendChild(newAddButton);


  // Append newDiv input to the mainContainer div
  mainContainer.appendChild(newDiv);

  // Add a handler to button for deleting the newDiv from the mainContainer
  newAddButton.onclick = addNew;


  };

STARTER OPT JS

      var counter = 0;

     function addNew(e) {

     var countAll = document.getElementsByTagName("select").length - 1;

     var lastSelectBox = document.getElementsByTagName("select")[countAll];

     var items = lastSelectBox.innerHTML;

     // Get the main Div in which all the other divs will be added
     var mainContainer = document.getElementById('start');

     // Create a new div for holding text and button input elements
     var newDiv = document.createElement('div');

     // Create a new text input
     var newText = document.createElement('select');
     newText.type = "select"; 
     newText.setAttribute("name", "text[]");

     newText.innerHTML = items;

     //for testing

     // Create buttons for creating and removing inputs
     var newAddButton = document.createElement('input');
     newAddButton.type = "button";
     newAddButton.value = " + ";
     newAddButton.id = "submit2";

     // Append new text input to the newDiv
     newDiv.appendChild(newText);

     // Append new button inputs to the newDiv
     newDiv.appendChild(newAddButton);

     // Append newDiv input to the mainContainer div
     mainContainer.appendChild(newDiv);

     // Add a handler to button for deleting the newDiv from the mainContainer
     newAddButton.onclick = addNew;
    };

MAIN OPT JS

      var counter = 0;

  function addNew(e) {

    var countAll = document.getElementsByTagName("select").length - 1;

    var lastSelectBox = document.getElementsByTagName("select")[countAll];

    var items = lastSelectBox.innerHTML;

    // Get the main Div in which all the other divs will be added
    var mainContainer = document.getElementById('main');

    // Create a new div for holding text and button input elements
    var newDiv = document.createElement('div');

    // Create a new text input

    var newText = document.createElement('select');
    newText.type = "select"; 
    newText.setAttribute("name", "text[]");

    newText.innerHTML = items;

    //for testing

    // Create buttons for creating and removing inputs
    var newAddButton = document.createElement('input');
    newAddButton.type = "button";
    newAddButton.value = " + ";
    newAddButton.id = "submit2";

    // Append new text input to the newDiv
    newDiv.appendChild(newText);

    // Append new button inputs to the newDiv
    newDiv.appendChild(newAddButton);

    // Append newDiv input to the mainContainer div
    mainContainer.appendChild(newDiv);

    // Add a handler to button for deleting the newDiv from the mainContainer
    newAddButton.onclick = addNew;

    };

DESSERT OPT JS

      var counter = 0;

      function addNew(e) {

      var countAll = document.getElementsByTagName("select").length - 1;

      var lastSelectBox = document.getElementsByTagName("select")[countAll];

      var items = lastSelectBox.innerHTML;

      // Get the main Div in which all the other divs will be added
     var mainContainer = document.getElementById('des');

      // Create a new div for holding text and button input elements
        var newDiv = document.createElement('div');

      // Create a new text input

      var newText = document.createElement('select');
       newText.type = "select"; 
      newText.setAttribute("name", "text[]");

      newText.innerHTML = items;

      //for testing

      // Create buttons for creating and removing inputs
      var newAddButton = document.createElement('input');
      newAddButton.type = "button";
      newAddButton.value = " + ";
      newAddButton.id = "submit2";

      // Append new text input to the newDiv
      newDiv.appendChild(newText);

      // Append new button inputs to the newDiv
      newDiv.appendChild(newAddButton);

      // Append newDiv input to the mainContainer div
      mainContainer.appendChild(newDiv);

      // Add a handler to button for deleting the newDiv from the mainContainer
     newAddButton.onclick = addNew;

     };

ACCOMP OPT JS

      var counter = 0;

  function addNew(e) {

    var countAll = document.getElementsByTagName("select").length - 1;

    var lastSelectBox = document.getElementsByTagName("select")[countAll];

    var items = lastSelectBox.innerHTML;

    // Get the main Div in which all the other divs will be added
    var mainContainer = document.getElementById('accomp');

    // Create a new div for holding text and button input elements
    var newDiv = document.createElement('div');

    // Create a new text input

    var newText = document.createElement('select');
    newText.type = "select"; 
    newText.setAttribute("name", "text[]");

    newText.innerHTML = items;

    //for testing

    // Create buttons for creating and removing inputs
    var newAddButton = document.createElement('input');
    newAddButton.type = "button";
    newAddButton.value = " + ";
    newAddButton.id = "submit2";




    // Append new text input to the newDiv
    newDiv.appendChild(newText);

    // Append new button inputs to the newDiv
    newDiv.appendChild(newAddButton);


    // Append newDiv input to the mainContainer div
    mainContainer.appendChild(newDiv);

   // Add a handler to button for deleting the newDiv from the mainContainer
    newAddButton.onclick = addNew;


    };

我可以提供实际文件，如果这样可以让您更容易理解。猜测它与复制有关。

Answer 1

您不需要所有这些JS文件，创建一个通用的AddSelect函数并将想要附加选择的div传递给它。

function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
}

复制/粘贴代码是一个坏习惯：）

Javascript＆amp; PHP下拉列表

1 个答案: