Question

我有一个html选择下拉列表，列出了各种猫，每个猫的数据属性为“颜色”，相关颜色和下拉列表旁边的按钮。

使用纯javascript，我希望能够单击按钮，获取所选猫的“颜色”属性，并让列表显示具有相同颜色属性的所有猫。示例：我选择了颜色属性为“黑色”的Cat 1，单击按钮，下拉列表显示Cats 1,3和4作为选项。

我是否需要实现for循环，或者for / in语句是否有效？

function filter() {
  //onclick modifies the "catList" select to display all cats with the same data-color attribute.
  var list = document.getElementByID("catList");

};

<form>
  <select id="catList">
      <option data-color="black">Cat 1</option>
      <option data-color="orange">Cat 2</option>
      <option data-color="black">Cat 3</option>
      <option data-color="black">Cat 4</option>
      <option data-color="orange">Cat 5</option>
   </select>
</form>

<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>

Answer 1

循环选项列表，并将display none添加到与所选选项不具有相同数据属性值的选项。

选项1 （这会隐藏其他选项，但您无法选择它们，直到您刷新页面）

＆＃13;

function filter() {
  //onclick modifies the "catList" select to display all cats with the same data-color attribute.
  var list = document.getElementById("catList");
  var option = list.options[list.selectedIndex]
  list.querySelectorAll('[data-color]').forEach(function (element) {
    if (option.getAttribute('data-color') !== element.getAttribute('data-color')) {
        element.classList.add('filter');
    }
  })
};

＆＃13;

.filter {
  display: none;
 }

＆＃13;

<form>
  <select id="catList">
      <option data-color="black">Cat 1</option>
      <option data-color="orange">Cat 2</option>
      <option data-color="black">Cat 3</option>
      <option data-color="black">Cat 4</option>
      <option data-color="orange">Cat 5</option>
   </select>
</form>

<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>

＆＃13;

选项2

＆＃13;

function filter() {
  //onclick modifies the "catList" select to display all cats with the same data-color attribute.
  var list = document.getElementById("catList");
  var color_filter = document.getElementById("color");
  var value = color_filter.options[color_filter.selectedIndex].value;
  list.querySelectorAll('[data-color]').forEach(function (element) {
    if (value !== element.getAttribute('data-color')) {
        element.classList.add('filter');
    }else {
        element.classList.remove('filter');
    }
  });
};

＆＃13;

.filter {
  display: none;
 }

＆＃13;

<select id="color" onchange="filter()">
      <option value="">Select filter</option>
      <option value="black">Black</option>
      <option value="orange">Orange</option>
</select>
<select id="catList">
      <option data-color="black">Cat 1</option>
      <option data-color="orange">Cat 2</option>
      <option data-color="black">Cat 3</option>
      <option data-color="black">Cat 4</option>
      <option data-color="orange">Cat 5</option>
   </select>

＆＃13;

Answer 2

你可以这样试试

HTML

{
     "id": "6e774dc2-2323-42b3-bd3c-ab64930f8b92",
      "timestamp": "2017-12-22T21:12:19.094Z",
      "lang": "en",
      "result": {
        "source": "agent",
        "resolvedQuery": "Yes",
        "action": "Triage.Triage-yes",
        "actionIncomplete": false,
        "parameters": {},
        "contexts": [
          {
            "name": "triage-followup",
            "parameters": {
              "triagecriteria": [],
              "roomEntity.original": "",
              "roomname": "300",
              "roomnames.original": "living",
              "roomid": "200",
              "context": "",
              "roomnames": [
                "living"
              ],
              "counter": "400",
              "roomEntity": "100",
              "triagecriteria.original": ""
            },
            "lifespan": 3
          }
        ],
        "metadata": {
          "intentId": "ecd4a2e5-65a0-41b2-ac72-edcf4d2e73f2",
          "webhookUsed": "true",
          "webhookForSlotFillingUsed": "false",
          "webhookResponseTime": 203,
          "intentName": "Triage - yes"
        },
        "fulfillment": {
          "speech": "Yes",
          "source": "agent",
          "displayText": "No",
          "messages": [
            {
              "type": 0,
              "speech": "Yes"
            }
          ]
        },
        "score": 1
      },
      "status": {
        "code": 200,
        "errorType": "success",
        "webhookTimedOut": false
      },
      "sessionId": "db8c1a4e-fa0c-4257-a536-78b63879eef9"
    }

JS

$update_response = file_get_contents("php://input"); 
$update = json_decode($update_response, true, 512, JSON_BIGINT_AS_STRING);

解决方案1.在此处查看实时演示jsfiddle

解决方案2.在此处查看实时演示jsfiddle

如何修改html选择以显示具有匹配数据属性的所有选项？

2 个答案: