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

Question

It's my first time i ask a question here. i'm stuck here, so i hope someone can solved this problem. thanks :)

I have some php code that i want to made a input select option adding automaticallly when clicked a button in my form. i mean, when the user clicked the button 3 times, so there are 3 input select options:

it was working when i have using with this javascript code:

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++;
     }
}

And this html code:

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

---

but, the problem. they are retrieved all of variable $sekolah in database because i only used SELECT * FROM Sekolah in sql code.

And now I want to made a query SELECT * FROM Sekolah where provinsi=$provinsi in my select option. but, the other problem is variable $provinsi got from javascricpt value. I mean,it is a chained dropdown. when i choose a option from $provinsi , so i want #sekolah option will retrieve only from the selected $provinsi option.

It worked in only static input, but i can't used it in my dimanic input select option.

So, what should i do? I'm not really understand about javascript, so can someone give me the solution? i made it in codeIgniter.

can i use a query in php code to get data from database in javascript?

Answer 1

Here is an example of how I would do this. I would create the select menu on load, so there is always one available. Then I would clone that select element whenever the button is clicked. See the example below.

Working example: 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

First of all, let me clarify what you want.

You have a dropdown "Provinsi" contains for example:

• Aceh
• Sumatera Utara
• Riau & Kepri

And you have a button "Tambah Sekolah".

You select "Sumatera Utara" then click "Tambah Sekolah", you will have a new dropdown "Sekolah", contains for example:

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

You select "Riau & Kepri" then click "Tambah Sekolah", you will have another new dropdown "Sekolah", contains for example:

• sekolah riau 1
• sekolah riau 2
• sekolah riau 3

If the above requirements is what you want, then you should use ajax too. Here what you need to do:

1. Collect the value of selected "province" by using javascript
2. Send "province" by using ajax to a page in server-side
3. A page in server-side, query the database for list of school filterd by "province" (SELECT * FROM sekolah WHERE provinsi = ?), then return the list of values to be shown in dropdown
4. After ajax request has been completed, create a new dropdown with values from previous ajax response

In this example: https://jsfiddle.net/o0s1L4k1/ , see what happen if "Tambah Sekolah" button is clicked:

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