javascript - 根据多个下拉菜单的结果加载特定div

Question

编辑:如果完全删除列出的 Javascript，并将下拉菜单重新设计为 <div>，该方法会更容易吗？在<li>内的，最后的 div 是由 Javascript onclick 事件生成的？例如

    <a id="click_link">click me</a>

       $("#click_link").click(function(){
       $('#div').load('http://www.link.com/');
    });

<小时/>

无论哪种方式，眼前的问题......

我决定使用外观优雅的 javascript 解决方案，这凸显了我在 javascript 方面缺乏经验!从表面上看，问题很简单......

在每个下拉菜单中选择一个选项后，我需要加载一个最终的 div，以便可以显示特定的按钮(购买具有指定选项的项目的链接，例如选择项链 D，带有 Stone)选项 B 和交付选项 A = 使用“购买”按钮加载 div #17)

下拉列表是通过 Javascript 填充和设置样式的 div(而不是使用更简单的 <form> 和 <input> 方法)，可以灵活地为每个选项添加两行不同样式的文本等。 - 这正是在这里，我踏入了未知的领域，我的经验不足也随之显露出来。

孤立部分的整体可见 here

好的，看代码。 这是 JavaScript:

function createByJson() {
    var pearlData = [                   
                    {description:'Choose your pearl...', value:'Pearls', text:'Pearls'},
                    {description:'Beautiful black stone', value:'Black Pearl', text:'Black Pearl'},
                    {description:'Classic white stone', value:'White Pearl', text:'White Pearl'}
                    ];
    $("#DropItPearls").msDropDown({byJson:{data:pearlData, name:'pearls', width: 200}}).data("dd"); 
        var blodeuweddData = [          
                    {description:'Choose your item...', value:'Blodeuwedd', text:'the Blodeuwedd Collection'},
                    {description:'A striking statement', value:'BlodeuweddCelticStatement', text:'Celtic Statement Piece'},
                    {description:'Gold laced flower and pearl', value:'BlodeuweddBracelet', text:'Bracelet'},
                    ];
    $("#DropItBlodeuwedd").msDropDown({byJson:{data:blodeuweddData, name:'blodeuwedd', width: 250}})
                                                            .msDropDown({on:{change:function(data, ui) {
                                                                                                                                                                    var val = data.value;
                                                                                                                                                                    if(val!="")
                                                                                                                                                                        window.location = val;
                                                                                                                                                                }}}).data("dd");
        var deliveryData = [                    
                    {description:'Choose your method...', value:'Delivery', text:'Delivery Options'},
                    {description:'4-6 weeks delivery', value:'Four Weeks', text:'Made To Order'},
                    {description:'(unavailable on this item)', value:'Rush', text:'Express Delivery', disabled:true}
                    ];
    $("#DropItDelivery").msDropDown({byJson:{data:deliveryData, name:'delivery', width: 200, selectedIndex: 1}}).data("dd");
         paymentData = [                    
                    {                                                                                                                               description:'How would you like to pay?', value:'Payment', text:'Payment Method'},
                    {image:'images/msdropdown/icons/Visa-56.png', description:'Secure online payment', value:'Visa', text:'Visa'},
                    {image:'images/msdropdown/icons/Paypal-56.png', description:'Secure online payment', value:'Paypal', text:'Paypal'},
                    {image:'images/msdropdown/icons/EmailPay-56.png', description:'Order by email', value:'Email Payment', text:'Send Your Details'},
                    {image:'images/msdropdown/icons/Mastercard-56.png', description:'(coming soon)', value:'Mastercard', text:'Mastercard', disabled:true},
                    {image:'images/msdropdown/icons/Collect-56.png', description:'(coming soon)', value:'Collection', text:'Order and Collect', disabled:true},
                    {image:'images/msdropdown/icons/Email-56.png', description:'email Menna', value:'Other Method', text:'Alternatives'}
                    ];
    $("#DropItPayments").msDropDown({byJson:{data:paymentData, name:'payments', width: 250}}).data("dd");
    }
    $(document).ready(function(e) { 
    //no use
    try {
        var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
                                                var val = data.value;
                                                if(val!="")
                                                    window.location = val;
                                            }}}).data("dd");
        var pagename = document.location.pathname.toString();
        pagename = pagename.split("/");
        pages.setIndexByValue(pagename[pagename.length-1]);
        $("#ver").html(msBeautify.version.msDropdown);
    } catch(e) {
        //console.log(e);   
    }

    $("#ver").html(msBeautify.version.msDropdown);

    //convert
    $("select").msDropdown();
    createByJson();
    $("#tech").data("dd");
});
function showValue(h) {
    console.log(h.name, h.value);
}
$("#tech").change(function() {
    console.log("by jquery: ", this.value);
})
//

和 html:

<div id="dropOptions">
    <div id="dropOptionsTitle"><p>Item</p></div>
    <div id="DropItBlodeuwedd"></div>
</div>

<div id="dropOptions">
    <div id="dropOptionsTitle"><p>Precious Stones</p></div>
    <div id="DropItPearls"></div>
</div>

<div id="dropOptions">
     <div id="dropOptionsTitle"><p>Payment</p></div>
    <div id="DropItPayments"></div>
</div>

<div id="dropOptions">
    <div id="dropOptionsTitle"><p>Delivery</p></div>
     <div id="DropItDelivery"></div>
</div>

<div id="dropOptions">
    <div id="dropOptionsTitle"><p>Buy Now!</p></div>
     <div id="DropItBuy"></div>
</div>

再次，可查看工作版本 here

非常感谢!

Answer 1

我认为您想要的是让您的“购买”按钮动态读取下拉列表当前显示的内容，并基于该内容构建用于重定向的链接，而不是在每次下拉列表更改时尝试更新“购买”按钮。

从你的代码中我看不出最终 URL 的形式应该是什么。例如，要获取交付选项的当前值，您可以检查 $('#DropItDelivery :selected').text() ，类似于 "Made To Order".

您现在购买!可以是一个带有 click 事件的 button，该事件读取这些值并使用基本字符串连接构造 URL，例如:

window.location = "buynow.html?delivery=" + $('#DropItDelivery :selected').text() +
                  "&payment=" + $('#DropItPayments :selected').text()
                  // etc.

当然，您必须在服务器上处理这些选项。

如果您想重定向到处理商的付款页面，您可以根据付款方式进行分支，并根据该方式向他们提供您想要的 URL。

var pm = $('#DropItPayments :selected').text();
if (pm == "Visa")
{
    // Visa payment URL construction
}
else if (pm == "Send Your Details")
{
    // Send your details URL construction
}
// etc.