如何找到所选选项的所有数据道具答案

【问题标题】：How can I find all data prop for selected option如何找到所选选项的所有数据道具
【发布时间】：2015-02-25 08:49:50
【问题描述】：

是否可以在选择对象中找到所选选项的所有属性，例如 data-name=""、data-client=""。我想制作一个数组/对象/json，数据属性中存储的信息很少。

<option
                data-category="<?= $product->category; ?>"
                data-color="<?= $product->color; ?>"
                data-price="<?= $product->price; ?>"
                data-priceclient="<?= $product->priceclient; ?>"
                data-um="<?= $product->um; ?>"
                data-x="<?= $product->x; ?>"
                data-y="<?= $product->y; ?>"
                data-z="<?= $product->z; ?>"

                value="<?= $product->id; ?>" <?= $selected; ?> >
                    <?= $product->x; ?>x<?= $product->y; ?>x<?= $product->z; ?> cm
            </option>

现在...我想制作一个类似的数组

data['category'] = "<?= $product->category; ?>"
data['color'] = "<?= $product->color; ?>"... etc

【问题讨论】：

所以 - 您在页面中有一个（JSON？）对象数组，您想根据下拉列表中选择的选项从中进行选择？从该选择中，您想要一个由这些 JSON 对象上的某些数据元素组成的对象集合？

标签： jquery option selected

【解决方案1】：

您可以为 option 元素调用 .data()

var $selected = $('#myselect option:selected');
var data = $selected.data();

注意：如果您使用数据 api 将任何其他数据添加到也会出现的元素中

使用dataset的另一种方式

var $selected = $('#myselect option:selected');
var data = $selected[0].dataset;// this is a DOMStringMap
var obj = JSON.parse(JSON.stringify(data));

https://developer.mozilla.org/en/docs/Web/API/DOMStringMap

【讨论】：

【解决方案2】：

看看this fiddle

对于这个 HTML：

<select id="selectCategory">
    <option value="1" data-category="1">Value 1-1</option>
    <option value="2" data-category="1">Value 2-1</option>
    <option value="3" data-category="1">Value 3-1</option>
    <option value="4" data-category="1">Value 4-1</option>
    <option value="5" data-category="1">Value 5-1</option>    
    <option value="10" data-category="2">Value 1-2</option>
    <option value="20" data-category="2">Value 2-2</option>
    <option value="30" data-category="3">Value 3-3</option>
    <option value="40" data-category="3">Value 4-3</option>
    <option value="50" data-category="3">Value 5-3</option>
</select>

<ul id="selectedCategory"></ul>

还有这段代码：

$(function(){
var selectElement = $("#selectCategory");

var items = [
    {cat:1, col:"red", val:"1 red" },        
    {cat:1, col:"blue", val:"1 blue" },

    {cat:2, col:"red", val:"2 red" },
    {cat:2, col:"blue", val:"2 blue" },

    {cat:3, col:"red", val:"3 red" },
    {cat:3, col:"blue", val:"3 blue" }
];

// please note: this code id broken out to show you the distinct steps - you can make this much more succinct
function displaySelectedCategory(){

    // find the data-category of the selected option
    var selectedCategory = selectElement
                                .find("option:selected")
                                .attr("data-category"); // or data("category")

    // filter the items according to the category (this is your array that you want - I think)
    var filtered = $(items).filter(function(index, item){
        // this is the evaluation that filters the list
        return item.cat == selectedCategory;  // || item.name="???"  || item.color="red"
    });

    // get a handle on the output destination (emptied)
    var outputElem = $("#selectedCategory").empty();

    // traverse the filtered items and append and element, based upon that item, for each
    $(filtered).each(function(index, item){
        var li = $("<li>").text(item.val);
        outputElem.append(li);
    })
}

selectElement.change(displaySelectedCategory);
});

它应该根据您在下拉列表中选择的内容构建一个“项目”列表（然后根据这些过滤的项目添加元素，以便您可以看到它正在工作）

HTH

【讨论】：