如何在链式下拉选项中使二元输入选择选项？

Question

这是我第一次在这里问一个问题。 我被困在这里，所以我希望有人可以解决这个问题。 谢谢 ：）

我有一些php代码，当我单击表单中的按钮时，我想使输入选择选项自动添加。 我的意思是，当用户单击按钮3次时，有3个输入选择选项：

当我使用此javascript代码时，它正在工作：

var counter = 1;
var limit = 30;
function addInput(divName){
    var kdprov= $("#provinsi_id").val();
     if (counter == limit)  {
          alert("Maksimal input ialah " + counter + " sekolah");
     }
     else {
          var newdiv = document.createElement('div'); 
          newdiv.innerHTML = "<div><span class='input-group-addon' ><b> Sekolah ke-"+ (counter + 1)+"</span></b><select class='form-control' name='npsn"+ 
          (counter + 1)+"' ><option value='' disabled selected>--Pilih Sekolah--</option>'.<?php foreach($sekolah as $sekolah1){  ?>'<option value='<?php echo $sekolah1->npsn;?>' ><?php echo $sekolah1->nama_sekolah; ?></option><?php } ?>.'</select></select></div>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

而这个html代码：

<input type="button" value="Tambah Sekolah" onClick="addInput('sekolah');"> </br></br>

---

但是，问题。 他们在数据库中检索了变量$sekolah所有变量，因为我仅在sql代码中使用SELECT * FROM Sekolah 。

现在我要查询SELECT * FROM Sekolah where provinsi=$provinsi我的选择选项SELECT * FROM Sekolah where provinsi=$provinsi 。 但是，另一个问题是从javascricpt值获得的变量$provinsi 。 我的意思是，这是一个链接的下拉列表。 当我从$provinsi选择一个选项时，因此我希望#sekolah选项将仅从所选的$provinsi选项中检索。

它仅在静态输入中起作用，但是我无法在我的dimanic输入选择选项中使用它。

所以我该怎么做？ 我对javascript不太了解，所以有人可以给我解决方案吗？ 我是在codeIgniter中取得的。

我可以使用php代码中的查询从JavaScript中的数据库中获取数据吗？

Answer 1

这是我将如何执行此操作的示例。 我会在加载时创建选择菜单，因此始终有一个可用菜单。 然后，只要单击按钮，我就会克隆该选择元素。 请参见下面的示例。

工作示例： https ： //jsfiddle.net/tkfc031h/1

的HTML

<div id="theSelectElements">
  <label class="foo">Number <span>1</span>
  <select>
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
    <option>five</option>
  </select>
  </label>
</div>

<button id="addOne">One more</button>

jQuery的

$('#addOne').click(function(){
  var theSelect = $('.foo:last-child').clone();
  var count = (parseInt(theSelect.find('span').text()) + 1);

  theSelect.find('span').html(count);
  theSelect.find('select').attr('name', "select"+count)

    $('#theSelectElements').append(theSelect);
})

Answer 2

首先，让我澄清一下您想要什么。

您有一个下拉列表“ Provinsi”，例如：

• 亚齐
• 苏门答腊
• 廖内和凯普里

然后您有一个按钮“ Tambah Sekolah”。

选择“ Sumatera Utara”，然后单击“ Tambah Sekolah”，您将有一个新的下拉列表“ Sekolah”，例如：

• 塞科拉sumut 1
• 塞科拉sumut 2
• 塞科拉sumut 3

选择“ Riau＆Kepri”，然后单击“ Tambah Sekolah”，您将有另一个新的下拉列表“ Sekolah”，例如：

• 塞科拉廖1
• 塞科拉廖2
• 塞科拉廖3

如果上面的要求是您想要的，那么您也应该使用ajax。 这里您需要做的是：

1. 使用javascript收集所选“省”的值
2. 通过使用ajax将“省”发送到服务器端的页面
3. 服务器端的页面，在数据库中查询由“省”过滤的学校列表（SELECT * FROM sekolah WHERE provinsi =？），然后返回要在下拉列表中显示的值列表
4. ajax请求完成后，使用先前ajax响应中的值创建一个新的下拉列表

在此示例中： https ://jsfiddle.net/o0s1L4k1/，看看如果单击“ Tambah Sekolah”按钮会发生什么：

$.ajax({
    method: 'POST',
    url: 'list-sekolah.php', // page that will query schools by province
    data: {
        provinsi: $('#provinsi').val() // send currently selected province
    },
    success: function(response) {
        // build the new <select> and append it
        var html = $('<p>Sekolah: <select>' + response + '</select></p>');
        $('body').append(html);
    }
});