2017-05-11 10 views
0

私の会社では、特定の代理人がさまざまな州に奉仕しています。ユーザーが選択する米国の州に基づいて連絡先情報を表示/非表示にするためのプルダウンを作成しようとしています。私は様々な方法を試してきましたが、3つのオプションを使用すると動作しますが、50の状態をすべて追加しようとするとうまくいかないのです。米国の州の選択に基づいて連絡先情報を表示/非表示するにはどうすればよいですか?

私のコードに問題はありますか?これを達成するより良い方法はありますか?

ありがとうございます。

$('#purpose').on('change', function() { 
 
     
 
\t if (this.value == 'blank') 
 
     { 
 
     $("#blank").show(); 
 
     } 
 
     else 
 
     { 
 
     $("#blank").hide(); 
 
     } 
 
\t 
 
\t if (this.value == 'jy') 
 
     { 
 
     $("#jess").show(); 
 
     } 
 
     else 
 
     { 
 
     $("#jess").hide(); 
 
     } 
 
     
 
     if (this.value == 'jp') 
 
     { 
 
     $("#justin").show(); 
 
     } 
 
     else 
 
     { 
 
     $("#justin").hide(); 
 
     } 
 
     
 
     if (this.value == 'rs') 
 
     { 
 
     $("#rob").show(); 
 
     } 
 
     else 
 
     { 
 
     $("#rob").hide(); 
 
     } 
 
\t 
 
\t if (this.value == 'rys') 
 
     { 
 
     $("#ryan").show(); 
 
     } 
 
     else 
 
     { 
 
     $("#ryan").hide(); 
 
     } 
 
\t 
 
\t if (this.value == 'ss') 
 
     { 
 
     $("#ssco").show(); 
 
     } 
 
     else 
 
     { 
 
     $("#ssco").hide(); 
 
     } 
 
    }); 
 
});
<div>       
 
           <select id='purpose'> 
 
            <option value="blank">--</option> 
 
            <option value="rys">Alabama</option> 
 
            <option value="ss">Alaska</option> 
 
            <option value="jy">Arizona</option> 
 
            <option value="rys">Arkansas</option> 
 
            \t <option value="jy">California</option> 
 
            <option value="ss">Colorado</option> 
 
            <option value="jp">Connecticut</option> 
 
            <option value="jp">Delaware</option> 
 
            <option value="rys">Florida</option> 
 
            <option value="rys">Georgia</option> 
 
            <option value="ss">Hawaii</option> 
 
            <option value="jy">Idaho</option> 
 
            <option value="rs">Illinois</option> 
 
            <option value="rs">Indiana</option> 
 
            <option value="rs">Iowa</option> 
 
            <option value="ss">Kansas</option> 
 
            <option value="jp">Kentucky</option> 
 
            <option value="rys">Louisiana</option> 
 
            <option value="jp">Maine</option> 
 
            <option value="jp">Maryland</option> 
 
           \t \t <option value="jp">Massachusetts</option> 
 
\t         <option value="rs">Michigan</option> 
 
            <option value="rs">Minnesota</option> 
 
            <option value="rys">Mississippi</option> 
 
            <option value="rs">Missouri</option> 
 
            <option value="jy">Montana</option> 
 
            <option value="ss">Nebraska</option> 
 
            <option value="jy">Nevada</option> 
 
            <option value="jp">New Hampshire</option> 
 
            <option value="jp">New Jersey</option> 
 
            <option value="ss">New Mexico</option> 
 
            <option value="jp">New York</option> 
 
            <option value="rys">North Carolina</option> 
 
            <option value="ss">North Dakota</option> 
 
            <option value="rs">Ohio</option> 
 
            <option value="ss">Oklahoma</option> 
 
\t         <option value="jy">Oregon</option> 
 
            <option value="jp">Pennsylvania</option> 
 
            <option value="jp">Rhode Island</option> 
 
            <option value="rys">South Carolina</option> 
 
            <option value="ss">South Dakota</option> 
 
            <option value="rys">Tennessee</option> 
 
            <option value="ss">Texas</option> 
 
            <option value="jy">Utah</option> 
 
            <option value="jp">Vermont</option> 
 
            <option value="rys">Virginia</option> 
 
            <option value="jy">Washington</option> 
 
            <option value="jp">West Virginia</option> 
 
            <option value="rs">Wisconsin</option> 
 
            <option value="jy">Wyoming</option> 
 
          </select> 
 
          
 
    <div style='display:none;' id='blank'> 
 
    Select Your State 
 
    </div>       
 
    
 
    <div style='display:none;' id='jess'> NAME 1 <br> 
 
    PHONE <br> 
 
    <a href="mailto:#">EMAIL</a> 
 
</div> 
 

 
<div style='display:none;' id='justin'> NAME 2 <br> 
 
    PHONE <br> 
 
    <a href="mailto:#">EMAIL</a> 
 
</div> 
 

 
<div style='display:none;' id='rob'> NAME 3 <br> 
 
    PHONE<br> 
 
    <a href="mailto:#">EMAIL</a> 
 
    </div> 
 
    
 
    <div style='display:none;' id='ryan'> NAME 4 <br> 
 
    PHONE <br> 
 
    <a href="mailto:#">EMAIL</a> 
 
    </div> 
 
    
 
    <div style='display:none;' id='ssco'> Please contact your local <a href="#">sales representative</a>. 
 
    </div> 
 

 
</div>

+0

あなたは 'SyntaxError'を持って、コンソールを確認してください。 – SjaakvBrabant

+2

あなたのスニペットにjQueryを組み込むことを忘れていて、追加の '}}があります。あなたの例では です。 – j08691

+2

* switch *ステートメントを見てください... –

答えて

0

だから、あなたがやっているやり方は、いろいろな理由で本当に良いことではありません。非常に柔軟性がなく、スタッフの割り当てが変更されるたびにHTMLとJavascriptの両方を変更する必要があります。

これは私がこれにどのようにアプローチしたかです。私は(データベースから取得するかもしれない)スタッフと配列のようなオブジェクトを持っている、スタッフは連絡先情報と関連付けられている状態のリストを持っています。ユーザーが状態を選択すると、各 "rep"を調べ、その状態に対応しているかどうかを確認し、表示されている場合はそれを表示リストに追加します。割り当てを変更する必要がある場合は、そのオブジェクトを編集するだけです。

var reps = { 
 
    Justin: { 
 
    states: ["AL", "AR"], 
 
    contact: { name: "Justin", phone: "555-123-4567" } 
 
    }, 
 
    Jess: { 
 
    states: ["AR", "MS", "LA"], 
 
    contact: { name: "Jess", phone: "555-234-5678" } 
 
    }, 
 
    Rob: { 
 
    states: ["NC", "SC"], 
 
    contact: { name: "Rob", phone: "555-345-6789" } 
 
    } 
 
}; 
 

 
$("#state").on("change", function() { 
 
    $("#repList").hide(); 
 
    $("#repList").html(""); 
 

 
    var selectedState = $(this).val(); 
 
    if (!selectedState) { 
 
    $("#reps").fadeOut(); 
 
    return; 
 
    } 
 
    $("#reps").fadeIn(); 
 
    var noReps = true; 
 
    Object.keys(reps).forEach(function(repKey) { 
 
    var rep = reps[repKey]; 
 
    if (rep.states.includes(selectedState)) { 
 
     noReps = false; 
 
     $("#repList").append(
 
     "<li>" + rep.contact.name + " - " + rep.contact.phone + "</li>" 
 
    ); 
 
    } 
 
    }); 
 
    if (noReps) { 
 
    $("#noReps").show(); 
 
    } else { 
 
    $("#noReps").hide(); 
 
    } 
 

 
    $("#repList").fadeIn(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="app" class="container"> 
 
    <h1>Choose your state</h1> 
 
    <select id="state" class="form-control"> 
 
     <option></option> 
 
     <option value="AL">Alabama</option> 
 
     <option value="AK">Alaska</option> 
 
     <option value="AZ">Arizona</option> 
 
     <option value="AR">Arkansas</option> 
 
     <option value="CA">California</option> 
 
     <option value="CO">Colorado</option> 
 
     <option value="CT">Connecticut</option> 
 
     <option value="DE">Delaware</option> 
 
     <option value="DC">District Of Columbia</option> 
 
     <option value="FL">Florida</option> 
 
     <option value="GA">Georgia</option> 
 
     <option value="HI">Hawaii</option> 
 
     <option value="ID">Idaho</option> 
 
     <option value="IL">Illinois</option> 
 
     <option value="IN">Indiana</option> 
 
     <option value="IA">Iowa</option> 
 
     <option value="KS">Kansas</option> 
 
     <option value="KY">Kentucky</option> 
 
     <option value="LA">Louisiana</option> 
 
     <option value="ME">Maine</option> 
 
     <option value="MD">Maryland</option> 
 
     <option value="MA">Massachusetts</option> 
 
     <option value="MI">Michigan</option> 
 
     <option value="MN">Minnesota</option> 
 
     <option value="MS">Mississippi</option> 
 
     <option value="MO">Missouri</option> 
 
     <option value="MT">Montana</option> 
 
     <option value="NE">Nebraska</option> 
 
     <option value="NV">Nevada</option> 
 
     <option value="NH">New Hampshire</option> 
 
     <option value="NJ">New Jersey</option> 
 
     <option value="NM">New Mexico</option> 
 
     <option value="NY">New York</option> 
 
     <option value="NC">North Carolina</option> 
 
     <option value="ND">North Dakota</option> 
 
     <option value="OH">Ohio</option> 
 
     <option value="OK">Oklahoma</option> 
 
     <option value="OR">Oregon</option> 
 
     <option value="PA">Pennsylvania</option> 
 
     <option value="RI">Rhode Island</option> 
 
     <option value="SC">South Carolina</option> 
 
     <option value="SD">South Dakota</option> 
 
     <option value="TN">Tennessee</option> 
 
     <option value="TX">Texas</option> 
 
     <option value="UT">Utah</option> 
 
     <option value="VT">Vermont</option> 
 
     <option value="VA">Virginia</option> 
 
     <option value="WA">Washington</option> 
 
     <option value="WV">West Virginia</option> 
 
     <option value="WI">Wisconsin</option> 
 
     <option value="WY">Wyoming</option> 
 
    </select> 
 
    <br> 
 
    <div> 
 
    <div style="display:none" id="reps"> 
 
     <h2>State Reps</h2> 
 
     <hr> 
 
     <h3 id="noReps" style="display:none"> 
 
      Sorry there are no reps for your state 
 
     </h3> 
 
     <ul id="repList"></ul> 
 
    </div> 
 
    </div> 
 
</div>

codepen:https://codepen.io/imjosh/pen/wdmyKv?editors=1010

+0

Google Chromeで、キーボードのF12キーを押してデベロッパーツールを開きます。コンソールにエラーが表示されます。 Webプログラミング(プロのヒント)を行う場合は、開発ツールを使用する方法を学ぶ必要があります。経験から、エラーメッセージはjQueryがロードされていないことを意味します。 bodyタグの最後のページにjqueryをロードしていますが、新しいコードをheadタグに入れました(推奨しません).jqueryはまだ実行されていません。あなたはをjqueryをロードするコードの後に​​移動する必要があります。 – imjosh

+0

あなたは私の英雄です!この仕事は、私をあまりにも長く悩ませています。どうもありがとうございます! – Momo

+0

すごくいいですね!ご参考までに、より古いブラウザ(<= IE 11など)で動作するように、配列をインクルードする必要があります。あなたが知らない場合は、それを行う方法について、SOを検索するか、別の質問を投稿してください。 – imjosh

0
$('#purpose').on('change', function(){ 
$(".somemainclass").hide(); 
$("#"+this.value).show(); 
}); 

なぜ単に要素IDへの入力値を割り当てますか?

<div id="jy" class="somemainclass"> </div> 
関連する問題