14 個の値を持つ 1 つのドロップダウンがあります。選択した値に応じて、SQL Server データベースにクエリを実行し、いくつかのクライアントを返し、2 番目のドロップダウンに表示します。
2 番目のドロップダウンで、各値に選択するチェックボックスがある jQuery Multiselect ウィジェットを使用する必要があります。
これが私が最後にやろうとしたことですが、うまくいきません。
<form>
<label for="lstTiers">Tier:</label>
<select name="lstTiers" id="lstTiers">
<option value="1">Tier 1</option>
<option value="2">Tier 2</option>
<option value="3">Tier 3</option>
<option value="4">Tier 4</option>
<option value="5">Tier 5</option>
<option value="6">Tier 6</option>
<option value="7">Tier 7</option>
<option value="8">Tier 8</option>
<option value="9">Tier 9</option>
<option value="10">Tier 10</option>
<option value="11">Tier 11</option>
<option value="12">Tier 12</option>
<option value="13">Tier 13</option>
<option value="14">Tier 14</option>
</select>
<label for="lstClients">Client:</label>
<select name="lstClients" id="lstClients">
</select>
<input type="button" name="click_me" id="click_me" value="Click Me" />
</form>
jQuery での 1 つの試みを次に示します。
$('#click_me').click(function() { alert('here');
$.ajax({
url: 'Ajax-test.cfc?method=returnSomething',
data: {
Tier: $('#lstTiers').val()
},
cache: false,
dataType: 'json',
success: function(data) {
$('#lstClients').html(data);
},
// This fires when an error with ColdFusion occurs
error: function() {
alert('An error has occured!');
}
});
}); // End click()
オプションをループして構築した他のjQueryも試しました。
最後に、これが私の cfc ファイルです。
<cfcomponent output="false">
<cffunction access="remote" name="returnSomething" returntype="query" returnformat="json">
<cfargument name="Tier" type="string" required="yes">
<cfquery name="qryGetClients" datasource="ProjectGrid_Test">
SELECT Div, ClientName FROM tblClientUpgradeClients WHERE Tier = #arguments.Tier# ORDER BY Div
</cfquery>
<cfreturn qryGetClients>
<cffunction>
</cfcomponent>
可能であれば、返されたドロップダウンで、ユーザーがチェックボックスを使用して複数選択できるようにする必要があります。jQuery Multiselect ウィジェットで遊んでみましたが、この動的クエリでは機能しませんでした。
$('#lstClients).multiselect(
{ noneSelectedText:"All Selected",
show: ["fade"],
hide: ["fade"],
selectedList: 1,
multiple: true,
uncheckAllText: ["Clear"]
});