如何在选项中添加所选属性

时间：2017-05-01 13:53:27

标签： php jquery

我有两个下拉菜单，它们绑在一起。 我想在我的代码中添加所选属性，但它在这里不起作用是我的代码。

<script type="text/javascript">
var data = { search_by_type: <?php echo $json_data; ?> };
$("#search_by_type").change(function () {
$('#category').empty().append($('<option></option>').val('').html('Select category'));
var matchVal = $("#search_by_type option:selected").text();
data.search_by_type.filter(function (cat) {
if (cat.TE == matchVal) {
$("#category").append($('<option selected="selected"></option>').val(cat.CI).html(cat.CE)); // Here i set id in value field
}
});
});
$('#category').change(function () {
$('#size').val($(this).val());
});
</script>

这是我的json数据

[{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Boul\r\n",
    "CH": "",
    "CU": "",
    "CI": "e723aadf-be9f-4f3e-b55f-4a80ac479441"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Dakni\r\n",
    "CH": "",
    "CU": "",
    "CI": "bd38a507-18de-4897-90a1-1825d86a2d86"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Krishn Bhakti Shakha\r\n",
    "CH": "",
    "CU": "",
    "CI": "bfca4966-7559-4652-b392-0df98b3dae3a"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Nath\r\n",
    "CH": "",
    "CU": "",
    "CI": "12643016-5125-4cbd-a32f-dd67316dd451"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Niranjani\r\n",
    "CH": "",
    "CU": "",
    "CI": "0e5c1165-c469-4d8e-83fb-2ec1bade1eb8"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Nirguni\r\n",
    "CH": "",
    "CU": "",
    "CI": "092d2309-5f28-47d4-a577-6f279f2e4daf"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Others\r\n",
    "CH": "",
    "CU": "",
    "CI": "19693ea9-dadb-4264-972f-32eddd21877e"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Ram Bhakti Shakha\r\n",
    "CH": "",
    "CU": "",
    "CI": "3f772798-bdcf-44cf-b561-867f76c8e6d4"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Sikh Gurus\r\n",
    "CH": "",
    "CU": "",
    "CI": "b3001ff0-36ba-4055-92ff-828d658fa91b"
},
{
    "TI": "83643aca-c07d-4431-9550-2a8479dd2342",
    "TE": "Saint",
    "TH": "",
    "TU": "",
    "CE": "Vaishnav\r\n",
    "CH": "",
    "CU": "",
    "CI": "7dc9b7ef-5b4a-4499-a1b2-2049d65681c8"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Chishtiya",
    "CH": "",
    "CU": "",
    "CI": "5e3b6942-413e-4c17-adeb-1f491f858a26"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Firdausiya\r\n",
    "CH": "",
    "CU": "",
    "CI": "2ca96833-1602-4ada-b6c3-af3acde35fe4"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Madariya\r\n",
    "CH": "",
    "CU": "",
    "CI": "c4a354b0-43e3-4caf-98f3-afb74a4c1001"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Naqsbandiya\r\n",
    "CH": "",
    "CU": "",
    "CI": "abdf23dd-8678-4103-b4ab-35c1b932a9f1"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Others",
    "CH": "",
    "CU": "",
    "CI": "9abdf62c-f2fb-426f-bee0-ae48dc025ff1"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "ovasiya\r\n",
    "CH": "",
    "CU": "",
    "CI": "89fd86eb-7023-4c5d-90aa-b14b5efc3069"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Qadariya\r\n",
    "CH": "",
    "CU": "",
    "CI": "c06b1953-9a0a-431d-9908-393995145ea5"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Qalandariya\r\n",
    "CH": "",
    "CU": "",
    "CI": "a7910a03-14a1-4bf8-893c-88ffb97637f2"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "shattariya\r\n",
    "CH": "",
    "CU": "",
    "CI": "8f4a879a-7177-4089-9a33-1793eaab8aac"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Sufis of Bihar\r\n",
    "CH": "",
    "CU": "",
    "CI": "a80a58cb-c0f7-4a72-b686-cbded120fb1a"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Sufis of Dakan\r\n",
    "CH": "",
    "CU": "",
    "CI": "c925ccb1-7e0d-40ea-81f7-23fa54181e69"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Sufis of Gujrat\r\n",
    "CH": "",
    "CU": "",
    "CI": "a23e00ab-1929-4de3-956d-c03be68653ee"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Sufis of Iran\r\n",
    "CH": "",
    "CU": "",
    "CI": "70a17ed3-a117-4fcf-ba24-80401afe7169"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Sufis of Kashmir\r\n",
    "CH": "",
    "CU": "",
    "CI": "58589976-ee2e-48d5-b4f7-22ebbb614c3e"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Sufis of Punjab\r\n",
    "CH": "",
    "CU": "",
    "CI": "0d1dda6d-8def-4cce-91e3-29efe4000dd6"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Sufis of Sindh\r\n",
    "CH": "",
    "CU": "",
    "CI": "ff16b2a7-9474-44a6-b1a8-56e814acee7c"
},
{
    "TI": "6383c9a3-8813-493b-a4d8-d882e49c3718",
    "TE": "Sufi",
    "TH": "",
    "TU": "",
    "CE": "Suhrawardiya\r\n",
    "CH": "",
    "CU": "",
    "CI": "b98d0806-4455-47ba-99e3-7f3d8a607c5e"
}]

这是我的PHP脚本

<select class="filter-btn" name="search_by_type" id="search_by_type">
<option value=""> -Search by type- </option>
<?php $typeId = isset($_GET['type']) ? $_GET['type'] : false;
$selected = 'selected="selected"'; ?>
<option <?php if($typeId=="83643aca-c07d-4431-9550-2a8479dd2342"){ echo $selected; } ?> id="83643aca-c07d-4431-9550-2a8479dd2342" value="Saint">Saint</option>
<option <?php if($typeId=="6383c9a3-8813-493b-a4d8-d882e49c3718"){ echo $selected; } ?> id="6383c9a3-8813-493b-a4d8-d882e49c3718" value="Sufi">Sufi</option>
</select>
<select class="filter-btn" name="category" id="category">
<option value=""> -Select category- </option>
</select>
<span class="search-btn"> <button type="submit" name="subm" id="search"> Search <i class="fa fa-search"></i> </button> </span>
</span>

1 个答案:

答案 0 :(得分：0)

在类别下拉列表中设置值时，您也应该调用更改功能。看看下面的片段。 

if (cat.TE == matchVal) {
$("#category").append($('<option selected="selected"></option>').val(cat.CI).html(cat.CE)); // Here i set id in value field
$("#category").change();
}

以下是基于您的问题的代码，我使用过：

<form action="index.php?type=83643aca-c07d-4431-9550-2a8479dd2342" method="post">
    <select class="filter-btn" name="search_by_type" id="search_by_type">
    <option value=""> -Search by type- </option>
        <?php $typeId = isset($_GET['type']) ? $_GET['type'] : false;
            $selected = 'selected="selected"';
        ?>
        <option <?php if ($typeId == "83643aca-c07d-4431-9550-2a8479dd2342") {
            echo $selected;
        } ?> id="83643aca-c07d-4431-9550-2a8479dd2342" value="Saint">Saint</option>
        <option <?php if ($typeId == "6383c9a3-8813-493b-a4d8-d882e49c3718") {
            echo $selected;
        } ?> id="6383c9a3-8813-493b-a4d8-d882e49c3718" value="Sufi">Sufi</option>
    </select>
    <select class="filter-btn" name="category" id="category">
        <option value=""> -Select category- </option>
    </select>

    <span class="search-btn"> <button type="submit" name="subm" id="search"> Search <i class="fa fa-search"></i> </button> </span>
    </form>
</span>
<script type="text/javascript">            
        var data = JSON.parse('{ "search_by_type":  [{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Boul\\r\\n","CH":"","CU":"","CI":"e723aadf-be9f-4f3e-b55f-4a80ac479441"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Dakni\\r\\n","CH":"","CU":"","CI":"bd38a507-18de-4897-90a1-1825d86a2d86"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Krishn Bhakti Shakha\\r\\n","CH":"","CU":"","CI":"bfca4966-7559-4652-b392-0df98b3dae3a"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Nath\\r\\n","CH":"","CU":"","CI":"12643016-5125-4cbd-a32f-dd67316dd451"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Niranjani\\r\\n","CH":"","CU":"","CI":"0e5c1165-c469-4d8e-83fb-2ec1bade1eb8"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Nirguni\\r\\n","CH":"","CU":"","CI":"092d2309-5f28-47d4-a577-6f279f2e4daf"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Others\\r\\n","CH":"","CU":"","CI":"19693ea9-dadb-4264-972f-32eddd21877e"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Ram Bhakti Shakha\\r\\n","CH":"","CU":"","CI":"3f772798-bdcf-44cf-b561-867f76c8e6d4"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Sikh Gurus\\r\\n","CH":"","CU":"","CI":"b3001ff0-36ba-4055-92ff-828d658fa91b"},{"TI":"83643aca-c07d-4431-9550-2a8479dd2342","TE":"Saint","TH":"","TU":"","CE":"Vaishnav\\r\\n","CH":"","CU":"","CI":"7dc9b7ef-5b4a-4499-a1b2-2049d65681c8"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Chishtiya","CH":"","CU":"","CI":"5e3b6942-413e-4c17-adeb-1f491f858a26"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Firdausiya\\r\\n","CH":"","CU":"","CI":"2ca96833-1602-4ada-b6c3-af3acde35fe4"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Madariya\\r\\n","CH":"","CU":"","CI":"c4a354b0-43e3-4caf-98f3-afb74a4c1001"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Naqsbandiya\\r\\n","CH":"","CU":"","CI":"abdf23dd-8678-4103-b4ab-35c1b932a9f1"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Others","CH":"","CU":"","CI":"9abdf62c-f2fb-426f-bee0-ae48dc025ff1"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"ovasiya\\r\\n","CH":"","CU":"","CI":"89fd86eb-7023-4c5d-90aa-b14b5efc3069"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Qadariya\\r\\n","CH":"","CU":"","CI":"c06b1953-9a0a-431d-9908-393995145ea5"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Qalandariya\\r\\n","CH":"","CU":"","CI":"a7910a03-14a1-4bf8-893c-88ffb97637f2"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"shattariya\\r\\n","CH":"","CU":"","CI":"8f4a879a-7177-4089-9a33-1793eaab8aac"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Sufis of Bihar\\r\\n","CH":"","CU":"","CI":"a80a58cb-c0f7-4a72-b686-cbded120fb1a"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Sufis of Dakan\\r\\n","CH":"","CU":"","CI":"c925ccb1-7e0d-40ea-81f7-23fa54181e69"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Sufis of Gujrat\\r\\n","CH":"","CU":"","CI":"a23e00ab-1929-4de3-956d-c03be68653ee"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Sufis of Iran\\r\\n","CH":"","CU":"","CI":"70a17ed3-a117-4fcf-ba24-80401afe7169"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Sufis of Kashmir\\r\\n","CH":"","CU":"","CI":"58589976-ee2e-48d5-b4f7-22ebbb614c3e"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Sufis of Punjab\\r\\n","CH":"","CU":"","CI":"0d1dda6d-8def-4cce-91e3-29efe4000dd6"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Sufis of Sindh\\r\\n","CH":"","CU":"","CI":"ff16b2a7-9474-44a6-b1a8-56e814acee7c"},{"TI":"6383c9a3-8813-493b-a4d8-d882e49c3718","TE":"Sufi","TH":"","TU":"","CE":"Suhrawardiya\\r\\n","CH":"","CU":"","CI":"b98d0806-4455-47ba-99e3-7f3d8a607c5e"}] }');
        $("#search_by_type").change(function () {
        $('#category').empty().append($('<option></option>').val('').html('Select category'));
        var matchVal = $("#search_by_type option:selected").text();
        data.search_by_type.filter(function (cat) {
        if (cat.TE == matchVal) {
        $("#category").append($('<option selected="selected"></option>').val(cat.CI).html(cat.CE)); // Here i set id in value field
                    }
                });
            });
        $('#category').change(function() {
            $('#size').val($(this).val());
        });
    </script>
相关问题
最新问题