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 在我的选择选项中。但是，另一个问题是来自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

首先，让我澄清你想要的东西。

你有一个下拉菜单＆＃34; Provinsi＆＃34;包含例如：

齐
Sumatera Utara
Riau＆amp; KEPRI

你有一个按钮＆＃34; Tambah Sekolah＆＃34;。

你选择＆＃34; Sumatera Utara＆＃34;然后点击＆＃34; Tambah Sekolah＆＃34;，你将有一个新的下拉菜单＆＃34; Sekolah＆＃34;，包含例如：

sekolah sumut 1
sekolah sumut 2
sekolah sumut 3

您选择＆＃34; Riau＆amp; KEPRI＆＃34;然后点击＆＃34; Tambah Sekolah＆＃34;，你将有另一个新的下拉菜单＆＃34; Sekolah＆＃34;，包含例如：

sekolah riau 1
sekolah riau 2
sekolah riau 3

如果您满足上述要求，那么您也应该使用ajax。在这里您需要做什么：

收集所选＆＃34;省＆＃34;的价值使用javascript
发送＆＃34;省＆＃34;通过使用ajax到服务器端的页面
服务器端的一个页面，查询数据库中的＆＃34;省＆＃34; （SELECT * FROM sekolah WHERE provinsi =？），然后返回要在下拉列表中显示的值列表
完成ajax请求后，使用之前的ajax响应

在这个例子中：https://jsfiddle.net/o0s1L4k1/，看看如果＆＃34; Tambah Sekolah＆＃34;单击按钮：

$.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);
    }
});

如何在链式下拉选项中进行dimanic输入选择选项？

2 个答案: