Javascript - 根據動態填充的下拉菜單轉到url

Question

我創建了一個條件表單，點擊提交後需要指向特定的產品頁面。這可能與這個代碼有關嗎？我無法弄清楚如何將數組值鏈接到URL變量。

Here's the JSFiddle

a=new Array("V1-1: 1/4-4 900-4500#", "V1-1 Light-Weight Compact Solution", "V1-2: 1/2-36 150-600#","V1-3: 1/2-2, 150-600#","V1-4: 4-36 900-4500#"); 
b=new Array('NexTech® R Series Valves','NexTech® E Series Valves','TrunTech® Valves', 'PulseJet Valves'); 
c=new Array('Coking Isolation Valves','Coking Switch Valves'); 
d=new Array('Three-Way Valves','Four-Way Valves'); 
e=new Array('IsoTech®'); 
f=new Array('Xactrol® Mark I Valves', 'Xactrol® Mark II Valves', 'Xactrol® Mark III Valves'); 
g=new Array('PulseJet Valves','Ecopack®'); 
h=new Array('AbrasoCheck® Slurry Check Valves', 'AbrasoTech® Slurry Ball Valves'); 
i=new Array('Electronic Relief Valves'); 
j=new Array('ValvXpress® Automated Valve Packages'); 
k=new Array('Acid Injection Valves'); 
l=new Array('Double Block-and-Bleed Valves'); 
m=new Array('Turbine Bypass System'); 
n=new Array('Check Valves'); 
o=new Array('ValvXpress®','EcoPack®','ValvPerformance Testing®','Slurry Valves','Acid Injection Valves','Double Block-and-bleed Valves','Rhinoite® Hardfacing','Switch Valves','HVOF RiTech®','Cryogenic Valves'); 

populateSelect(); 

$(function() { 

     $('#cat').change(function(){ 
     populateSelect(); 
    }); 

}); 


function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 


    if(cat=='a'){ 
     a.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='b'){ 
     b.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='c'){ 
     c.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='d'){ 
     d.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='e'){ 
     e.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='f'){ 
     f.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='g'){ 
     g.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='h'){ 
     h.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 


    if(cat=='i'){ 
     i.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='j'){ 
     j.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='k'){ 
     k.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='l'){ 
     l.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='m'){ 
     m.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='n'){ 
     n.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='o'){ 
     o.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 





} 

Answer 1

首先，您違反了DRY principle。而不是爲每組產品分別設置變量，而是將它們中的每一個都存儲在一種字典結構中，例如對象。

這將是我的第一次修訂。

var dict = { 
    a: ["V1-1: 1/4-4 900-4500#", "V1-1 Light-Weight Compact Solution", "V1-2: 1/2-36 150-600#","V1-3: 1/2-2, 150-600#","V1-4: 4-36 900-4500#"], 
    b: ['NexTech® R Series Valves','NexTech® E Series Valves','TrunTech® Valves', 'PulseJet Valves'], 
    c: ['Coking Isolation Valves','Coking Switch Valves'], 
    d: ['Three-Way Valves','Four-Way Valves'], 
    e: ['IsoTech®'], 
    f: ['Xactrol® Mark I Valves', 'Xactrol® Mark II Valves', 'Xactrol® Mark III Valves'], 
    g: ['PulseJet Valves','Ecopack®'], 
    h: ['AbrasoCheck® Slurry Check Valves', 'AbrasoTech® Slurry Ball Valves'], 
    i: ['Electronic Relief Valves'], 
    j: ['ValvXpress® Automated Valve Packages'], 
    k: ['Acid Injection Valves'], 
    l: ['Double Block-and-Bleed Valves'], 
    m: ['Turbine Bypass System'], 
    n: ['Check Valves'], 
    o: ['ValvXpress®','EcoPack®','ValvPerformance Testing®','Slurry Valves','Acid Injection Valves','Double Block-and-bleed Valves','Rhinoite® Hardfacing','Switch Valves','HVOF RiTech®','Cryogenic Valves'] 
}; 

$(function() { 
    // attach an 'change' event handler 
    // THEN trigger the event handler to call the function from the start 
    $('#cat').change(populateSelect).trigger('change'); 
}); 

function populateSelect() { 
    // this refers to the current element 
    // get the selected value 
    var cat = this.value; 
    // always a good idea to cache your element that you will be re-using (maybe move it outside the function too) 
    var items = $('#item'); 

    items.html(''); 
    // check if there are products associated with the selected value 
    if (dict.hasOwnProperty(cat)) { 
     // show products 
     dict[cat].forEach(function(product) { 
      items.append('<option>' + product + '</option>'); 
     }); 
    } 
} 

現在，根據您的實際問題。我們可以修改數組，以便它也包含一個url。爲了簡單起見，你可以有陣列數組，例如

一個：[[ 「V1-1：1/4-4 900-4500＃」， 「URL」]，[ 「V1-1輕量緊湊的解決方案 」， 「URL」]，。 ..]

或對象數組的可讀性例如

一個：[{名： 「V1-1：1/4-4 900-4500＃」，URL： 「URL」}，{名稱： 「V1-1 輕量緊湊的解決方案」， url：「url」}，...]

所以這裏是我的第二次修訂使用對象數組。 （我縮短詞典只是爲了展示插圖）。

var dict = { 
    a: [ 
     { 
      name: "V1-1: 1/4-4 900-4500#", 
      url: "http://www.bing.com" 
     }, 
     { 
      name: "V1-1 Light-Weight Compact Solution", 
      url: "http://www.google.com" 
     }, 
     { 
      name: "V1-2: 1/2-36 150-600#", 
      url: "http://www.yahoo.com" 
     }, 
    ], 
    b: [ 
     { 
      name: 'NexTech® R Series Valves', 
      url: 'http://www.nike.com' 
     }, 
     { 
      name: 'NexTech® E Series Valves', 
      url: 'http://www.walmart.com' 
     } 
    ], 
    c: [{ 
     name: 'Coking Isolation Valves', 
     url: 'http://www.adidas.com' 
    }], 
}; 

$(function() { 
    // cache element so that you don't re-search the DOM multiple times 
    var $items = $('#item'); 

    $('#cat').change(populateSelect).trigger('change'); 
    $('#goto').click(redirectToURL); 

    // place the functions within the document.ready so that they have access to the cached elements 
    function populateSelect() { 
     $items.html(''); 
     if (dict.hasOwnProperty(this.value)) { 
      dict[this.value].forEach(function(product) { 
       // you can store the URL in HTML5-data attribute to use it later 
       $items.append('<option data-url="' + product.url + '">' + product.name +'</option>'); 
      }); 
     } 
    } 

    function redirectToURL() { 
     // get the URL from the selected option's data-url and redirect to it 
     window.location.href = $items.find(':selected').data('url'); 
    } 
}); 

從技術上說，你是不是「提交」形式，但只是「重定向」 - 所以我不會用一個提交按鈕，但只是一個普通的按鈕。

<input type="button" id="goto" value="submit"> 

下面是最後修訂的demo。你必須修復字典。

Answer 2

你可以通過使用你已經擁有的標記，這些選定的值到產品頁面，只需添加一個動作形式

<form action="yourpageurl" method="get"> 

你需要寫你的產品頁面根據傳遞的參數動態顯示任何必需的信息或重定向。由於我們已經選擇了上面的get方法，參數將作爲查詢字符串（url的一部分）的一部分傳遞，但您也可以使用POST。

Answer 3

我認爲我會採取這種方法。存儲一組對象，其中每個對象都包含該產品的產品名稱和相應的URL。然後（假設您正在使用表單），您可以將表單的操作更改爲所選選項的值。

備註：建議使用括號表示法（[]）而不是new Array()。您可以閱讀更多關於此here和其他來源。此外，由於您的cat只會在您使用populatSelect函數時成爲一個值，因此您應該使用if..else if..else if..結構。在匹配的情況下，您將完全保留if..else if表達式，節省時間。而如果你保留if..if..if..，即使你馬上找到了比賽，你也必須評估他們。

編輯：你一定要遵循一些其他的答案是使用（即使用字典，這將讓你找回正確的類別沒有所有的if檢查）的概念。

var cats = { 
    a: [ 
     { product: 'V1-1: 1/4-4 900-4500#', url: '<product url>' }, 
     { product: 'V1-1 Light-Weight Compact Solution', url: '<product url>' }, 
     { product: 'V1-2: 1/2-36 150-600#', url: '<product url>' }, 
     { product: 'V1-3: 1/2-2, 150-600#', url: '<product url>' }, 
     { product: 'V1-4: 4-36 900-4500#', url: '<product url>' } 
    ], 
    b: [ 
     { product: 'NexTech® R Series Valves', url: '<product url>'}, 
     { product: 'NexTech® E Series Valves', url: '<product url>' }, 
     { product: 'TrunTech® Valves', url: '<product url>' }, 
     { product: 'PulseJet Valves', url: '<product url>' } 
    ], 

// same for the rest of your categories 
}; 

populateSelect(); 

$(function() { 
    $('#cat').change(function(){ 
     populateSelect(); 
    }); 
}); 


function populateSelect(){ 
    var cat = $('#cat').val(); 
    $('#item').html(''); 

    appendProducts(cats[cat]); 
} 

function appendProducts(arr) { 
    arr.forEach(function(t) { 
      $('#item').append('<option value="' + t.url + '">'+ t.product +'</option>'); 
     }); 
} 

$('form').submit(function() { 
    this.action = $('select').find(':selected').val(); 
});