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"}、...]

したがって、私のの第2版は、オブジェクトの配列を使用しています。 （私は単にイラストを表示するために辞書を短くする）。

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関数の場合にのみ1つの値になるため、if..else if..else if..構造体を使用する必要があります。一致する場合は、if..else if式を完全にそのままにして、時間を節約します。あなたがif..if..if..を守っていたのであれば、すぐに試合を見つけたとしても、すべてを評価しなければなりません。

EDIT：あなたは間違いなく、他の回答のいくつかは（つまり、すべての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(); 
});