如何在链式下拉选项中制作 dimanic 输入选择选项？

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 在我的选择选项中。但是，另一个问题是变量 $provinsi 从 javascricpt 值获得。我的意思是，它是一个链式下拉菜单。当我从$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”。

你选择“Sumatra Utara”然后点击“Tambah Sekolah”，你会看到一个新的下拉菜单“Sekolah”，例如：

• sekolah sumut 1
• sekolah sumut 2
• sekolah sumut 3

您选择“Riau & Kepri”，然后点击“Tambah Sekolah”，您将看到另一个新的下拉菜单“Sekolah”，例如：

• sekolah riau 1
• sekolah riau 2
• sekolah riau 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);
    }
});