"複数の"ドロップボックスでajaxデータを取得する方法は？

Question

私は2つの複数の選択ドロップボックスを持っています。フォーム1私は他の複数の選択ドロップボックスを膨らませたい..誰もこれで私を助けることができますか？ 私はこれが2複数のドロップボックスです

function demo1() { 
    var emp_id = document.getElementById("employeeName").value; 
    alert(emp_id); 
    var datastring = "emp_id=" + emp_id; 
    //alert (emp_id); 



    $.ajax({ 
     type: "POST", 
     url: "search_emp.php", 
     data: datastring, 
     dataType: "text", 
     //async: false, 
     success: function (data) { 
      //$("#clname").append(data); 
      $('#clname').html(data); 
      //document.getElementById("clname").innerHTML=data;    
     } 
    }); 
} 

...これは私のアヤックスで...私はその結果が第二番号複数選択ドロップボックスに表示するjQueryのか、アヤックスから

を結果得ます。 。

<label>Select Employee </label> 
    <select multiple="multiple" class="w300" name="employeeName[]" id="employeeName" > 

<?php $result = $conn->query("SELECT id,first_name,last_name,employee_id FROM employees"); 
       while ($row = $result->fetch_assoc()){ ?> 
        <option value="<?php echo $row['id']; ?>"><?php echo $row['id']; ?><?php echo $row['first_name']; ?> 
        <?php echo $row['last_name'] ?></option> 

       <?php } ?> 
<!--<?php echo $option;?>--> 
<!--<?php echo $option2;?>--> 
</select> 
</br> 
<label>Select Client</label> 
<select multiple="multiple" class="w300" name="clname[]" id="clname"> 


<!--<?php echo $c;?>--> 
</select> 

Answer 1

.html()あなたは<select>にそれを行うことができない、DOM要素のinnerHTML内容を設定します。それを解決する方法は2つあります。

1）汚れ&クイック：

このように、あなたのsearch_emp.phpも<select>のHTMLコードを返すように置き換えるHTML：次に

echo '<select multiple="multiple" class="w300" name="clname[]" id="clname">'; 
while($row = mysqli_fetch_assoc($ress)) { 
    echo '<option value="'.$row['gn_id'].'">'.$row['gamename'].'</option>'; 
} 
echo '</select>'; 

ますjQuery.replaceWith()を使用してDOMエレメント全体を置き換えることができます。

$('#clname').replaceWith(data); 

2）非常に良く：代わりにHTMLコードを返す

JSONからDOMを構築し、あなたのsearch_emp.phpはJSON、あなたが簡単にPHP's json_encode()と、クライアントの配列を渡すことによってこれを行うことができ

[ 
    { 
     "gn_id": "123", 
     "gamename": "superduper client" 
    }, 
    { 
     "gn_id": "234", 
     "gamename": "another client" 
    } 
] 

のようなものを返す必要があります

// identify the content as JSON 
header('Content-Type: application/json'); 

// put your MySQL query here. 
// if errors occur, send a HTTP 500 header and return a useful error message as JSON 

// collect results in an array 
$rows = array(); 
while($row = mysqli_fetch_assoc($ress)) { 
    $rows[] = $row; 
} 

// return the results as a JSON list 
echo json_encode($rows); 

：JSONコンテンツタイプヘッダ（あなたは「JSON」に $.ajaxの dataType属性を変更する必要がありますか、ショートカット機能 $.json()を使用できることに注意を追加

AJAX呼び出しを行う前に、既存のすべてのオプションを選択から削除することをお勧めします。 AJAX呼び出しの成功機能では、結果をループして、選択にそれらを追加することができます

// reset the select options 
$('#clname').empty(); 

// make the ajax call 
$.ajax({ 
    type: "POST", 
    url: "search_emp.php", 
    data: datastring, 
    dataType: "json", 
    success: function (data) { 
     // build the options from the JSON data 
     for (let client of data) { 
      $('#clname').append('<option value="' + client.gn_id + '">' + client.gamename + '</option>'); 
     }   
    }, 
    // optional, but good to have: error handling 
    error: function (data) { 
     alert("An error occurred:\n" + data.error) 
    } 
}); 

jsfiddle

注：let client of dataは（ES2015対応）現代のブラウザで動作します。古いブラウザをサポートしたい場合は、旧式のfor (len=data.length, i=0; i<len; ++i)ループを実行します。またはjQuery.each()を使用してください（これは遅いかもしれませんが）。