У меня есть три DDL в представлении. Я запускаю функцию javascript на "onchange" первого DDL, чтобы заполнить вторую, а вторую - заполнить третью. Работает отлично.
Проблема в том, что когда первый DDL установлен на невыбранный, то есть "Select a Value", второй DDL запускается и устанавливает себя "Select a Value", но второе событие DDL "onchange" не срабатывает, поэтому третий DDL остается заселенным с данными, полученными от предыдущего выбора.
Как мне получить второй DDL для запуска события, которое я могу использовать для обновления третьего DDL? Или есть другой способ?
Код ниже:
@{
ViewBag.Title = "CascadingList";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{Html.EnableUnobtrusiveJavaScript(true);}
<script type="text/javascript">
$(document).ready(function () {
getMarket();
});
function getMarket() {
var url = '@Url.Content("~/Strategies/MarketList")/';
$.getJSON(url, function (data) {
var items = "<option>Select a Market</option>";
$.each(data, function (i, market) {
if (market.Value.indexOf("\'") > -1) {
s = market.Value + " " + market.Text;
alert(s + ": Market.Value cannot contain \'")
}
items += "<option value='" + market.Value + "'>" + market.Text + " </option>";
});
$('#MarketsID').html(items);
});
}
function getShareType() {
var url = '@Url.Content("~/Strategies/ShareTypeList")/' + $('#MarketsID').val();
$.getJSON(url, function (data) {
var items = '<option>Select an Asset Type</option>';
$.each(data, function (i, shareType) {
items += "<option value='" + shareType.Value + "'>" + shareType.Text + " </option>";
});
$('#ShareTypesID').html(items);
});
}
function getShare() {
var url = '@Url.Content("~/Strategies/ShareList")/' + $('#MarketsID').val() + '|' + $('#ShareTypesID').val();
$.getJSON(url, function (data) {
var items = '<option>Select a Share</option>';
$.each(data, function (i, share) {
items += "<option value='" + share.Value + "'>" + share.Text + "</option>";
});
$('#SharesID').html(items);
});
}
</script>
<h2>Strategy</h2>
<div id="MarketsDivID">
<label for="Markets">Markets</label>
<select id="MarketsID" name="Markets" onchange="getShareType()"></select>
</div>
<div id="ShareTypesDivID">
<label for="ShareTypes">ShareTypes</label>
<select id="ShareTypesID" name="ShareTypes" onchange="getShare()" ></select>
</div>
<div id="SharesDivID">
<label for="Shares">Shares</label>
<select id="SharesID" name="Shares" ></select>
</div>
Спасибо. Я пробовал это и крутился по кругу, но это заставило меня думать иначе. Исправлено его добавлением вызова функции, которая заполняет третий DDL в функции, которая заполняет второй DDL - таким образом, он всегда вызывается.
function getShareType() {
var url = '@Url.Content("~/Strategies/ShareTypeList")/' + $('#MarketsID').val();
$.getJSON(url, function (data) {
var items = '<option>Select an Asset Type</option>';
$.each(data, function (i, shareType) {
items += "<option value='" + shareType.Value + "'>" + shareType.Text + "</option>";
});
$('#ShareTypesID').html(items);
});
**** Added This ****
getShare();
}
Попробуйте выбрать значение для select
после $('#selectID').val()
его с помощью $('#selectID').val()
, если это не работает при onchange
как это; $('#selectID').trigger('change')