は、2回目の選択オプションを変更します。

Question

私は、html、php、およびjavascriptを使用してWebページを作成しています。 私はselectオプションのためのスクリプトを使用しました。私がコードを実行する際に直面する問題は、最初の入力フィールドが再びオプションを選択しても消えないということです。代わりに、私は2番目の入力ボックスと1番目の入力ボックスも取得します。つまり、もし私が他の条件を使用しても、私は両方を得る。

var fil = document.getElementById("filter"); 
 
fil.onchange = function filteron() { 
 
    var filtertag = document.getElementById("filter"); 
 
    var tag = filtertag.options[filtertag.selectedIndex].value; 
 
    var searchbox = document.createElement("input"); 
 
    var filter = document.getElementById("criteriain"); 
 
    searchbox.setAttribute("id", "criteria"); 
 
    if (tag === 'ed') { 
 
    searchbox.setAttribute("type", "date"); 
 
    searchbox.setAttribute("name", "searchin"); 
 
    } else if (tag === 'gw') { 
 
    searchbox.setAttribute("type", "number"); 
 
    searchbox.setAttribute("name", "searchin"); 
 
    } 
 
    filter.appendChild(searchbox); 
 

 
};

<form action="" method="post"> 
 
    <label for="filter" id="filterin">Filter by</label> 
 
    <select id="filter" size="1" name="filter" onchange="filteron()"> 
 
       <option value='slno' >Sl No</option> 
 
       <option value='ed' >Entry Date</option> 
 
       <option value='lot' >Lot No</option> 
 
       <option value='par' >Party</option> 
 
       <option value='var' >Variety</option> 
 
       <option value='cst' >Current status</option> 
 
       <option value='gw' >Gray width</option> 
 
      </select> 
 
    <br/> 
 

 
    <label for='criteria' id='criteriain'>Search for</label>

Answer 1

かかわらず、あなたの選択の新しい要素を毎回作成しているだけ新しい要素のためのif/elseブロックタイプを変更するためです。

var fil = document.getElementById("filter"); 
 
fil.onchange = function filteron() { 
 
    var filtertag = document.getElementById("filter"); 
 
    var tag = filtertag.options[filtertag.selectedIndex].value; 
 
    var searchbox = document.getElementById("criteria"); 
 
    var filter = document.getElementById("criteriain"); 
 
    if(undefined === searchbox || null === searchbox) { 
 
    searchbox = document.createElement("input"); 
 
    searchbox.setAttribute("id", "criteria"); 
 
    } 
 
    
 
    if (tag === 'ed') { 
 
    searchbox.setAttribute("type", "date"); 
 
    searchbox.setAttribute("name", "searchin"); 
 
    } else if (tag === 'gw') { 
 
    searchbox.setAttribute("type", "number"); 
 
    searchbox.setAttribute("name", "searchin"); 
 
    } 
 
    filter.appendChild(searchbox); 
 

 
};

<form action="" method="post"> 
 
    <label for="filter" id="filterin">Filter by</label> 
 
    <select id="filter" size="1" name="filter" onchange="filteron()"> 
 
       <option value='slno' >Sl No</option> 
 
       <option value='ed' >Entry Date</option> 
 
       <option value='lot' >Lot No</option> 
 
       <option value='par' >Party</option> 
 
       <option value='var' >Variety</option> 
 
       <option value='cst' >Current status</option> 
 
       <option value='gw' >Gray width</option> 
 
      </select> 
 
    <br/> 
 

 
    <label for='criteria' id='criteriain'>Search for</label>