1

编辑：如果列出的 Javascript 被完全删除，并且下拉菜单重新设置为<div>'s 内的样式<li>，并且最终的 div 是由 Javascript onclick 事件生成的，那么这种方法会容易得多吗？例如

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

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

不管怎样，眼前的问题...

我决定使用外观优雅的 javascript 解决方案凸显了我在 javascript 方面的大量经验不足！问题是，表面上看，很简单……

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

下拉列表是通过 Javascript 填充和设置样式的 div（而不是使用更简单的<form>and<input>方法），可以灵活地为每个选项添加两行不同样式的文本等。 - 这是我进入领域的地方未知，我的经验不足。

隔离部分可在此处完整查看

好的，到代码。这是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>

同样，工作版本可在此处查看

提前谢谢了！

4

1 回答 1

0

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

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

立即购买！可以是一个读取这些值并使用基本字符串连接构造 URLbutton的click事件，例如：

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.
于 2013-01-29T18:33:18.890 回答