フォームにIF文を使用して選択肢を絞り込みます

-1

私は基本的に私のフォームで自分の選択肢を制限したいので、車とトランスミッションが選択されたときに特定の色しか表示されないようにします。私はフォームを作成しました。問題は、Javascriptファイルにコードを作成することです。私はそれを作る方法を知らないので、Car 1がAutomaticと同様に選択された場合、たとえば黒と青だけがオプションとして表示されます。私は比較的新しいコーディングと任意の助けをいただければ幸いです。フォームにIF文を使用して選択肢を絞り込みます

おかげ

HTML

<script src="Script\configurator.js" type="text/javascript"></script> 
<form name="CarConfigurator"> 
    <select name="Car_make" onchange="Transmission(this.value);"> 
     <option value=" " selected="selected">None</option> 
     <option value="1">Audi RS6</option> 
     <option value="2">BMW M4</option> 
     <option value="3">Mercedes C63 AMG</option> 
    </select> 
    <br> 
    <br> 
    <select name="A_M" > 
     <option value="" selected="selected">None</option> 
     <option value="1" selected="selected">Automatic</option> 
     <option value="2" selected="selected">Manual</option> 
    </select> 
    <br> 
    <br> 
    <select name="Color"> 
     <option value="" selected="selected">None</option> 
     <option value="1">Black</option> 
     <option value="2">Blue</option> 
     <option value="3">Red</option> 
     <option value="4">White</option> 
     <option value="5">Green</option> 
    </select> 
</form>

Javascriptを

function Transmission(Car) { 
    var make = document.CarConfigurator.A_M; 
    make.options.length = 0; 
    if (Car == "1") { 
     make.options[make.options.length] = new Option('Automatic','1'); 
     make.options[make.options.length] = new Option ('Manual','2'); 
    } 
    if (Car =="2") { 
     make.options[make.options.length] = new Option('Manual','2'); 
    } 
    if (Car == "3") { 
     make.options[make.options.length] = new Option('Automatic','3'); 
    } 
}

出典

2017-01-11 Duncher

-1

のように、これは何をしたいですアクセスすることができます：

ここでは、Duncherを行く

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <form name="CarConfigurator"> 
     <select name="Car_make" onchange="Transmission();"> 
      <option value=" " selected="selected">None</option> 
      <option value="1">Audi RS6</option> 
      <option value="2">BMW M4</option> 
      <option value="3">Mercedes C63 AMG</option> 
     </select> 
     <br> 
     <br> 
     <select name="A_M" onchange="Transmission();"> 
      <option value="" selected="selected">None</option> 
      <option value="1" selected="selected">Automatic</option> 
      <option value="2" selected="selected">Manual</option> 
     </select> 
     <br> 
     <br> 
     <select name="Color" onchange="ChoicesMade();"> 
      <option value="" selected="selected">None</option> 
      <option value="1">Black</option> 
      <option value="2">Blue</option> 
      <option value="3">Red</option> 
      <option value="4">White</option> 
      <option value="5">Green</option> 
     </select> 
     <div id="imageContainer" style="display: none;"><img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" /></div> 
    </form> 
    <script type="text/javascript"> 
     function Transmission() { 
      var Car = document.CarConfigurator.Car_make.value; 
      var make = document.CarConfigurator.A_M.value; 
      var color = document.CarConfigurator.Color; 
      color.options.length = 0; 
      if (Car == "1" && make == '1') { 
       color.options.add(new Option('Black', '1')); 
       color.options.add(new Option('Blue', '2')); 
      } 
      else if(Car == '2' && make == '1') 
      { 
       color.options.add(new Option('Red', '3')); 
       color.options.add(new Option('White', '4')); 
      } 
      ChoicesMade(); 
     } 

     function ChoicesMade() 
     { 
      var form = document.CarConfigurator; 
      var car = form.Car_make.value; 
      var make = form.A_M.value; 
      var color = form.Color.value; 
      if(car != ' ' && make != '' && color != '') 
      { 
       var imageContainer = document.querySelector('#imageContainer'); 
       imageContainer.style.display = 'block'; 
      } 
     } 
    </script> 
</body> 
</html>

出典

2017-01-11 04:16:42

そうです。ありがとう。 – Duncher

別の車に色を追加すると、何ができますか？それ以外のIf文？または、他の何か。私は別の車に異なる色の選択肢を与えたい場合のように。すべての選択肢が作られたら、イメージを表示させるのは難しいですか？ – Duncher

'Else if'または' switch'文はいずれにせよ、@DuncherでもOKです。そして、画像の表示/非表示はあまり難しくありません。 –

あなたはJavaScriptでオブジェクトを使用して、オプションを変更するには、オブジェクトの各配列をループすることができます。例えば

var cars = { 
"Audi_RS6":{ 
    "name":"Audi RS6", 
    "Automatic":["color_1","color_2"], 
    "Manual":["color_1","color_2"] 
    }, 
"BMW_M4":{ 
    "name":"BMW M4", 
    "Manual":["color_1","color_2"] 
    }, 
"Mercedes_C63_AMG":{ 
    "name":"Mercedes C63 AMG", 
    "Automatic":["color_1","color_2"] 
    } 
};

値は、この

var result = cars.Audi_RS6.Manual[1];

出典

2017-01-11 04:10:55

は、このコードは何をしたい正確に行い

<!DOCTYPE html> 
    <html><head> 
    <title></title> 
</head> 

<body> 
    <form name="CarConfigurator"> 
     <select id="car" name="Car_make"> 
      <option value="" selected="selected">Which car?</option> 
      <option value="car1">Audi RS6</option> 
      <option value="car2">BMW M4</option> 
      <option value="car3">Mercedes C63 AMG</option> 
      </select> 
     <br> 
     <br> 
     <select id="trans" name="A_M"> 
      <option value="" selected="selected">What trans?</option> 
      <option value="auto">Automatic</option> 
      <option value="man">Manual</option> 
      </select> 
     <br> 
     <br> 
     <select id="color" name="Color"> 
      <option value="" selected="selected">What Color?</option> 
      <option value="black">Black</option> 
      <option value="blue">Blue</option> 
      <option value="red">Red</option> 
      <option value="white">White</option> 
      <option value="green">Green</option> 
      </select> 
    </form> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src="configurator.js"></script> 
</body> 
</html>

JavaScript：

あなたは（すなわち、それらをしたいどのようにあなたの他の車の作業&トランスの組み合わせを取得するためにいくつかの調整を行う必要がありますあなたが望む色だけを表示しています）、それ以外のif文をtransmission（）メソッドに追加してください。これは途中でjQueryを使用しています。

Screen shot

出典

2017-01-11 05:17:39 waldalvajr

ありがとうございます。これは機能します。車ごとに画像を追加することは可能でしょうか？どこにソースを置くのですか？ – Duncher

フォームにIF文を使用して選択肢を絞り込みます

答えて

関連する問題