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

是否可以在“选择对象”中找到选定选项的所有属性，如数据名=、数据客户端=。我想制作一个数组/object/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

---

您可以调用option元素的.data以便

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

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

另一种使用

看看

对于此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

那么-你有JSON吗？页面中的对象数组，您希望根据下拉列表中选择的选项从中进行选择？从这个选择中，您想要一个对象集合，它由这些JSON对象上的一些数据元素组成？

$(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);
});