Question

我正在尝试创建一个表单，其中每个选项都有两个潜在值。用户将首先选择“低价”（lp）或“高价”（hp），然后选择类型1或2，它们都具有“hp”和“lp”的数据属性。理想情况下，通过使用lp或hp值调用data属性，我应该能够从Type 1或2中选择我想要的价格，并将其显示在标记为“Cost”的输入中。然后将成本乘以镜头以找到“总计”。遗憾的是，我无法使数据属性生效，除非它们位于实际的选择标记中而不是单独的选项标记中。如何解决这个问题的任何想法将不胜感激！谢谢！

这是一个JS：

http://jsfiddle.net/gv0029/Esr9f/3/

这是HTML：

<select id="pPost_P" class="pSelect">
    <option value="select">Price</option>
    <option value="lp">Low Price</option>
    <option value="hp">High Price</option>
</select>
<br/>
<select class="pSelect" id="pPost_D">
    <option value="select">Type</option>
    <option data-hp="5" data-lp="2" value="Type 1">Type 1</option>
    <option data-hp="9" data-lp="8" value="Type 2">Type 2</option>
</select>
<br/>    
<input id="pPost_C" placeholder="Cost" />
<br/>
<input id="pPost_F" class="pSelect" placeholder="Footage" />
<br/>
<input id="pPost_A" placeholder="Total" />

这是JS：

$(document.body).on('keypress keydown keyup change', '[class="pSelect"]', function () {
        var parts = $(this).attr('id').split("_"),
            service = parts[0],

            price = $("#" + service + "_P").val(),
            fee = parseFloat($("#" + service + "_D").data("'" + price + "'"), 10),
            cost = $("#" + service + "_C"),
            footage = parseFloat($("#" + service + "_F").val(),
            10),
            amount = '';
        if (isNaN(footage)) {
            total.val("Please enter Quantity");
        }

        if (!isNaN(footage) && (!isNaN(Number(fee)))) {
            amount = Math.ceil(footage * fee);
            total.val(amount);
            cost.val(fee);
        }
});

Answer 1

试试这个：

$("#test").change(function(){
 var content =  $('#test option:selected').html();
 var valor = $('#test').val();   
 $("#second").append("<option value='"+valor+"'>"+content+"</option>");
});

在这里工作小提琴：http://jsfiddle.net/robertrozas/Zz5JL/

Answer 2

如果有人遇到与我相同的问题，请留下这个。简而言之，我最大的问题是我没有在选择本身中选择实际选项（至少不正确），所以一旦我修复了这只是使用带有“百分比”参数的data（）的问题，那就是选择高价或低价的选择器中所选选项的值。谢谢您的帮助！希望这也有助于其他人。

JS：

$(document.body).on('keypress keydown keyup change', '[class="pSelect"]', function(){
        var parts = $(this).attr('id').split("_"),
            service = parts[0],
            percentage = $("#" + service + "_P option:selected").val(),
            price = $("#" + service + "_D option:selected").data(percentage),
            footage = parseFloat($("#" + service + "_F").val(),10),
            fee =  Math.ceil(price * footage),
            cost = $("#" + service + "_C");

            cost.val(price);

        if(isNaN(footage)) {
            $("#" + service + "_A").val("Please enter Quantity");
        }

        if(!isNaN(footage) && (!isNaN(fee))) {
            $("#" + service + "_A").val(Math.ceil(fee));
            $("#" + service + "_C").val(fee);
        }
    });

其中一个选项的示例，其中包含两个不同的价格： HTML

<option data-hp="63" data-lp="5">Type1</option>

如何使用数据属性来存储和选择选项上的两个价格

2 个答案: