1. ホーム
  2. 質問と答え
  3. Javascript選択オプションアプリケーション

Javascript選択オプションアプリケーション

2017-04-02 5 views
0

Javasciptを使用して選択アプリケーションを作成しようとしています。私は、インターネットJavascript選択オプションアプリケーション

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2" ></select> 

</body> 

<script type="text/javascript"> 

    function populate(s1,s2){ 
     var s1,s2; 
     s1 = document.getElementById(s1); 
     s2 = document.getElementById(s2); 

     if(s1.value=='Hyundai'){ 
      optionArray=['Please Select Car','i10','i20','Verna'] 
     } else 
     if(s1.value=='Honda'){ 
      optionArray=['Please Select Car','Amaze','Jazz','City'] 
     } else 
     if(s1.value=='Maruti'){ 
      optionArray=['Please Select Car','Swift','Dezire','Ciaze'] 
     } 


     for (var i = 0; i < optionArray.length; i++) { 
     var store = optionArray[i]; 
     var createNewEl = document.createElement('option'); 
     createNewEl.innerHTML = store; 
     s2.appendChild(createNewEl); 
     } 

    }  

</script> 
</html>

これは私がこのapllicationを書くために今使用し、完全なコードである上、このコードについて知るようになったが、私は毎回私は車のメイクからオプションを選択**と私は別のオプションを選択したときに作るfromcar **、それは車のモデルから、前のオプションを削除しないと、リストが毎回上ので増加します、私は車からオプションを選択し

出典

2017-04-02 Aseem Sharma

答えて

2

モミのリストに追加しますst、jQueryをインポートする必要があります。 <head>タグの間にこれを貼り付けます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

あなたのスクリプトは、それがすべて古い値を削除する必要がありますので、リストを選択の最後に新しい値を追加しています。

$("#slct2 option").remove();

私はそれをテストし、うまく動作します。ここには完全な作業コードがあります。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2"></select> 

</body> 

<script type="text/javascript"> 

    function populate(s1,s2){ 

     var s1,s2; 
     s1 = document.getElementById(s1); 
     s2 = document.getElementById(s2);   

     $("#slct2 option").remove(); 

     if(s1.value=='Hyundai'){ 
      optionArray=['Please Select Car','i10','i20','Verna'] 
     } else 
     if(s1.value=='Honda'){ 
      optionArray=['Please Select Car','Amaze','Jazz','City'] 
     } else 
     if(s1.value=='Maruti'){ 
      optionArray=['Please Select Car','Swift','Dezire','Ciaze'] 
     } 

     for (var i = 0; i < optionArray.length; i++) { 
      var store = optionArray[i]; 
      var createNewEl = document.createElement('option'); 
      createNewEl.innerHTML = store; 
      s2.appendChild(createNewEl); 
     } 
    }  

</script> 
</html>

EDIT： あなたはjQueryのを使用したくない場合は、単にこれで、この$("#slct2 option").remove();を置き換える：

while (s2.firstChild) { 
    s2.removeChild(s2.firstChild); 
}

出典

2017-04-02 13:38:44 szymon

+0

ありがとう これはうまくいきましたが、あなたが提供してくれた他の2つの方法のほかに、Javascriptを学ぶ初期段階にあり、while文を部分的に理解していると思います。私たちが**声明など何か他の何かをすることができる何かがありますか？ –

関連する問題

 関連する問題