我如何過濾下拉串列，當我選擇型別時，它會在名稱的復選框中顯示 ajax 回應中的型別
這是html的代碼
fieldset.Field {
margin-top: 10px;
padding: 0;
height: 100%;
}
ul.checkbox {
margin: 0;
padding: 0;
margin-left: 20px;
list-style: none;
}
ul.checkbox li input {
margin-right: .25em;
}
.container-body ul.checkbox li {
float: left;
min-width: 350px;
}<div class="container position">
<div class="row">
<label for="recyclable-type" class="col-form-label"> <b>Recyclable Type:</b> </label>
<select id="recyclable-type" name="recyclable-type" class=" custom-select col-4">
<option selected value="">All</option>
</select>
</div>
</div>
<div class="container-body ">
<fieldset class="Field">
<ul id="checkbox" class="checkbox">
</fieldset>
</ul>
</div>
</div>這是 ajax 的代碼，我在其中呼叫我的下拉串列以及型別和名稱的復選框
$.ajax({
// The url that you're going to post
/*
This is the url that you're going to put to call the
backend api,
in this case, it's
https://ecoexchange.dscloud.me:8090/api/get (production env)
*/
url:"https://ecoexchange.dscloud.me:8090/api/get",
// The HTTP method that you're planning to use
// i.e. GET, POST, PUT, DELETE
// In this case it's a get method, so we'll use GET
method:"GET",
// In this case, we are going to use headers as
headers:{
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query:"RecyclableTypeGet()",
// Gets the apikey from the sessionStorage
apikey:sessionStorage.getItem("apikey")
},
success:function(data,textStatus,xhr) {
// console.log(data);
for (let i = 0;i<data.length;i ) {
$("#recyclable-type").append(
`
<option val="${data[i]["RecyclableType"]}">${data[i]["RecyclableType"]}</option>
`
);
// can also use this way
// $("#select-recyclables").append(
// `
// <option val="${data[i]["RecyclableType"]}">${data[i]["RecyclableType"]}</option>
// `
// );
}
},
error:function(xhr,textStatus,err) {
console.log(err);
}
});
$.ajax( {
url: 'https://ecoexchange.dscloud.me:8090/api/get',
type: 'GET',
dataType: 'json',
headers:{
query: "RecyclableGet(0)",
// Gets the apikey from the sessionStorage
apikey: sessionStorage.getItem("apikey")
},
success: function(data) {
//console.log(data);
var html='';
$.each(data, function(key, value) {
html ='<input type="checkbox" name="recyclable_id[]" value="' value.RecyclableID '"><label style="padding-left: 10px;">' value.Name '</label><br>';
//console.log(value)
});
$('#checkbox').html(html);
}
});
這就是我的 ajax 回應的樣子
[
{
"RecyclableID": 1,
"Name": "recyclable",
"RecyclableType": "test recyclable type"
},
{
"RecyclableID": 3,
"Name": "test recyclable 2",
"RecyclableType": "WASTE"
},
{
"RecyclableID": 129,
"Name": "test recyclable 4",
"RecyclableType": "test recyclable type"
},
{
"RecyclableID": 131,
"Name": "test recyclable 6",
"RecyclableType": "test recyclable type"
},
{
"RecyclableID": 132,
"Name": "test recyclable 7",
"RecyclableType": "test recyclable type"
},
{
"RecyclableID": 133,
"Name": "test recyclable 8",
"RecyclableType": "test recyclable type"
},
{
"RecyclableID": 134,
"Name": "test recyclable 34",
"RecyclableType": "WASTE"
},
{
"RecyclableID": 138,
"Name": "recyclable thing",
"RecyclableType": "WASTE"
},
{
"RecyclableID": 139,
"Name": "recyclable thing 2",
"RecyclableType": "Ewaste"
},
{
"RecyclableID": 153,
"Name": "test recyclable 10",
"RecyclableType": "Other"
},
{
"RecyclableID": 154,
"Name": "test recyclable 11",
"RecyclableType": "Ewaste"
},
{
"RecyclableID": 155,
"Name": "test recyclable 123",
"RecyclableType": "test recyclable type 2"
},
{
"RecyclableID": 159,
"Name": "some recyclable name",
"RecyclableType": "CC"
},
{
"RecyclableID": 161,
"Name": "some recyclable name 2",
"RecyclableType": "Ewaste"
},
{
"RecyclableID": 162,
"Name": "recyclable 2",
"RecyclableType": "test recyclable type 2"
},
{
"RecyclableID": 165,
"Name": "test recyclable 15",
"RecyclableType": "WASTE"
},
{
"RecyclableID": 166,
"Name": "test recyclable 18",
"RecyclableType": "testing type"
},
{
"RecyclableID": 167,
"Name": "some recyclable name 23",
"RecyclableType": "Ewaster"
},
{
"RecyclableID": 168,
"Name": "Lorem ipsum dolor sit amet, consectetur",
"RecyclableType": "test recyclable type"
},
{
"RecyclableID": 169,
"Name": "Copper",
"RecyclableType": "WASTE"
},
{
"RecyclableID": 170,
"Name": "Choking Bar",
"RecyclableType": "Ewaste"
},
{
"RecyclableID": 171,
"Name": "Cabinet",
"RecyclableType": "Other"
},
{
"RecyclableID": 172,
"Name": "Cash Box",
"RecyclableType": "WASTE"
},
{
"RecyclableID": 173,
"Name": "Copper Telephone Cable",
"RecyclableType": "Other"
},
{
"RecyclableID": 174,
"Name": "Rope",
"RecyclableType": "CC"
},
{
"RecyclableID": 175,
"Name": "Silver",
"RecyclableType": "test recyclable type"
}
]
這是我呼叫 ajax 時網站示例影像的樣子
這是我當前的 html 網站的樣子
現在我希望如果選擇了型別，它將名稱顯示為它在 ajax 回應中的任何型別，我該怎么做？
uj5u.com熱心網友回復：
首先，您需要在創建復選框時添加資料型別屬性。所以改變你的代碼如下
$.each(data, function(key, value) {
var type = value.RecyclableType;
html ='<li data-type="' type '"><input type="checkbox" name="recyclable_id[]" value="' value.RecyclableID '"><label style="padding-left: 10px;">' value.Name '</label><br></li>';
});
然后在下拉串列中系結更改事件，以便您可以過濾復選框 onchange
$("#checkbox").change(function(){
var type = $(this).value;
// hide all checkbox
$(this).find("li").hide();
//show only checkbox having the data-type attribute
$(this).find("li[data-type='" type "']").show();
})
uj5u.com熱心網友回復：
我的朋友幫我在這里找出答案
$("#recyclable-type").change(function(){
var type = $(this).val();
//show only checkbox having the data-type attribute
if ($(this).val()!="" && $(this).val()!=null) {
// hide all checkbox
$("#checkbox").find("li").hide();
// filters by recyclable type
$("#checkbox").find("li[data-type='" type "']").show();
} else {
$("#checkbox").find("li").show();
}
// console.log($(this).find("li[data-type='" type "']"));
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/396986.html
標籤：javascript 查询 阿贾克斯 复选框 下拉式菜单