Question

是否有可能找到所有属性，如data-name =＆＃34;＆＃34;，data-client =＆＃34;＆＃34;对于选择对象中的选定选项。我想在数据属性中创建一个数组/对象/ 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

Answer 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

Answer 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

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

2 个答案: