从 API 结果到影响第二个下拉列表的下拉菜单的过渡 - 语义 UI
Transition from API results to Dropdown that affects a second dropdown - Semantic UI
我想将 'Food name' 从 API 结果更改为下拉列表。
当我 select 来自 'Food name' 的值(来自 API 结果)时,“服务”下拉列表会填充选项。
工作 - API 结果格式:
工作 - 填写“服务”下拉列表:
这就是我想要获得的:
不工作 - 服务下拉列表未填充:
HTML是这样的:
<div class="ui page_log">
<div class="ui search">
<div class="ui left icon input">
<i class="search icon"></i>
<input class="prompt" type="text" name="food_name" placeholder="Search...">
</div>
</div>
</div>
这是API(可用的版本)的javascript:
function page_log() {
$('.page_log .ui.search')
.search({
apiSettings: {
//url: '/autosuggest_log.php?term={query}'
url: 'http://www.json-generator.com/api/json/get/cfYMrjahSG?indent=2'
},
fields: {
results: 'results',
title: 'name',
id: 'id',
value: 'value',
url: false
},
onSelect: function (selected, options) {
console.log(selected, options);
$('.ui.dropdown.serving').removeClass('disabled').addClass('loading');
$.ajax({
method: "GET",
//url: "/autosuggest_serv.php?id=" + selected['id']
url: 'http://www.json-generator.com/api/json/get/ceYmRnmdOW?indent=2'
})
.done(function(res) {
console.log(res);
$('.ui.dropdown.serving').dropdown('change values', res['results']);
$('.ui.dropdown.serving').dropdown('set exactly', [ res['results'][0]['value'] ]);
$('.ui.dropdown.serving').removeClass('loading');
});
},
maxResults: 16,
minCharacters: 0
})
;
}
$(document).ready(function () {
if ($('.page_log').length) {
page_log();
}
});
在 Semantic UI 中有两种类型的下拉菜单,我都尝试过:
下拉类型 1
<select class="ui dropdown frr">
<option value="">Fruits T1</option>
<option value="9205">Oranges</option>
<option value="9003">Apples</option>
<option value="9316">Strawberries</option>
</select>
下拉类型 2
<div class="ui selection dropdown frr">
<input type="hidden" name="fruits">
<i class="dropdown icon"></i>
<div class="default text">Fruits T2</div>
<div class="menu">
<div class="item" data-value="9205">Oranges</div>
<div class="item" data-value="9003">Apples</div>
<div class="item" data-value="9316">Strawberries</div>
</div>
</div>
我知道了,我使用了这个下拉菜单:
<div class="ui selection dropdown frdd">
<input type="hidden" name="fruits">
<i class="dropdown icon"></i>
<div class="default text">Fruits T2</div>
<div class="menu">
<div class="item" data-value="9205">Oranges</div>
<div class="item" data-value="9003">Apples</div>
<div class="item" data-value="9316">Strawberries</div>
</div>
</div>
并添加了这个脚本:
$('.ui.dropdown.frdd').dropdown({
onChange: function (selected, options) {
//console.log(selected, options);
$('.ui.dropdown.serving').removeClass('disabled').addClass('loading');
$.ajax({
method: "GET",
url: "https://www.json-generator.com/api/json/get/ceYmRnmdOW?indent=2"
})
.done(function(res) {
console.log(res);
$('.ui.dropdown.serving').dropdown('change values', res['results']);
$('.ui.dropdown.serving').dropdown('set exactly', [ res['results'][0]['value'] ]);
$('.ui.dropdown.serving').removeClass('loading');
});
}
});
我想将 'Food name' 从 API 结果更改为下拉列表。 当我 select 来自 'Food name' 的值(来自 API 结果)时,“服务”下拉列表会填充选项。
工作 - API 结果格式:
工作 - 填写“服务”下拉列表:
这就是我想要获得的:
不工作 - 服务下拉列表未填充:
HTML是这样的:
<div class="ui page_log">
<div class="ui search">
<div class="ui left icon input">
<i class="search icon"></i>
<input class="prompt" type="text" name="food_name" placeholder="Search...">
</div>
</div>
</div>
这是API(可用的版本)的javascript:
function page_log() {
$('.page_log .ui.search')
.search({
apiSettings: {
//url: '/autosuggest_log.php?term={query}'
url: 'http://www.json-generator.com/api/json/get/cfYMrjahSG?indent=2'
},
fields: {
results: 'results',
title: 'name',
id: 'id',
value: 'value',
url: false
},
onSelect: function (selected, options) {
console.log(selected, options);
$('.ui.dropdown.serving').removeClass('disabled').addClass('loading');
$.ajax({
method: "GET",
//url: "/autosuggest_serv.php?id=" + selected['id']
url: 'http://www.json-generator.com/api/json/get/ceYmRnmdOW?indent=2'
})
.done(function(res) {
console.log(res);
$('.ui.dropdown.serving').dropdown('change values', res['results']);
$('.ui.dropdown.serving').dropdown('set exactly', [ res['results'][0]['value'] ]);
$('.ui.dropdown.serving').removeClass('loading');
});
},
maxResults: 16,
minCharacters: 0
})
;
}
$(document).ready(function () {
if ($('.page_log').length) {
page_log();
}
});
在 Semantic UI 中有两种类型的下拉菜单,我都尝试过:
下拉类型 1
<select class="ui dropdown frr">
<option value="">Fruits T1</option>
<option value="9205">Oranges</option>
<option value="9003">Apples</option>
<option value="9316">Strawberries</option>
</select>
下拉类型 2
<div class="ui selection dropdown frr">
<input type="hidden" name="fruits">
<i class="dropdown icon"></i>
<div class="default text">Fruits T2</div>
<div class="menu">
<div class="item" data-value="9205">Oranges</div>
<div class="item" data-value="9003">Apples</div>
<div class="item" data-value="9316">Strawberries</div>
</div>
</div>
我知道了,我使用了这个下拉菜单:
<div class="ui selection dropdown frdd">
<input type="hidden" name="fruits">
<i class="dropdown icon"></i>
<div class="default text">Fruits T2</div>
<div class="menu">
<div class="item" data-value="9205">Oranges</div>
<div class="item" data-value="9003">Apples</div>
<div class="item" data-value="9316">Strawberries</div>
</div>
</div>
并添加了这个脚本:
$('.ui.dropdown.frdd').dropdown({
onChange: function (selected, options) {
//console.log(selected, options);
$('.ui.dropdown.serving').removeClass('disabled').addClass('loading');
$.ajax({
method: "GET",
url: "https://www.json-generator.com/api/json/get/ceYmRnmdOW?indent=2"
})
.done(function(res) {
console.log(res);
$('.ui.dropdown.serving').dropdown('change values', res['results']);
$('.ui.dropdown.serving').dropdown('set exactly', [ res['results'][0]['value'] ]);
$('.ui.dropdown.serving').removeClass('loading');
});
}
});