HTML 표에서 검색 - 여러 값 조합 (드롭 다운, 텍스트 필드 ..)

Question

드롭 다운 메뉴를 양식에 추가 할 수 있으며 드롭 다운의 선택된 값과 텍스트 필드의 값이 결합됩니다 검색하기?

코드가 HTML 표에 적용되어 방문자가 표를 검색 할 수 있습니다.

감사합니다. :)

<script type="text/javascript"> 

function search (phrase, _id){ 
    var words = phrase.value.toLowerCase().split(" "); 
    var table = document.getElementById(_id); 
    var ele; 
    for (var r = 0; r < table.rows.length; r++){ 
     ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,""); 
     var displayStyle = 'none'; 
     for (var i = 0; i < words.length; i++) { 
      if (ele.toLowerCase().indexOf(words[i])>=0) 
       displayStyle = ''; 
      else { 
       displayStyle = 'none'; 
       break; 
      } 
     } 
     table.rows[r].style.display = displayStyle; 
    } 
} 

</script> 

<form> 

<b>Words:</b> 

<input name="filter" onkeyup="search(this, 'my-table', 1)" type="text"> 

</form> 

Answer 1

var words = phrase.value.toLowerCase().split(" ");
후이 시도 :

var dd = document.getElementById("your_dropdown_id"); 
words.push(dd.options[dd.selectedIndex].text); 

합니다.
.
업데이트 :

위의 답변은 원래 질문에 대한 답변입니다. 이제 다른 문제가 생겼습니다.

귀하의 문제는, 당신이 그것을에서 대문자 문자열을 검색하는 것입니다

(즉, 'HBO'OR 'MBO') 소문자 모든 문자와 문자열 (당신은 당신의 if 상태 ele.toLowerCase()을 사용했습니다.)
를 지금보십시오 :

var displayStyle = 'block'; 
for (var i = 0; i < words.length; i++) 
    if (ele.toLowerCase().indexOf(words[i].toLowerCase()) == -1) { 
     displayStyle = 'none'; 
     break; 
    } 

'block'에 displayStyle 초기화 방법 및 break; 전에 변화는 위의 코드 전체에,이 논리에 대한 최선의 방법입니다.
이렇게하면 문제가 해결되기를 바랍니다. 내가 뭔가를 잘못하고 있어요 어쩌면

Answer 2

..

function search (phrase, _id){ 
    var words = phrase.value.toLowerCase().split(" "); 

    var dd = document.getElementById("education"); 
    words.push(dd.options[dd.selectedIndex].text); 

    var table = document.getElementById(_id); 
    var ele; 
    for (var r = 0; r < table.rows.length; r++){ 
     ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,""); 
     var displayStyle = 'none'; 
     for (var i = 0; i < words.length; i++) { 
      if (ele.toLowerCase().indexOf(words[i])>=0) 
       displayStyle = ''; 
      else { 
       displayStyle = 'none'; 
       break; 
      } 
     } 
     table.rows[r].style.display = displayStyle; 
    } 
} 

</script> 

<form> 

<b>Words:</b> 

<input name="filter" onkeyup="search(this, 'my-table', 1)" type="text"><br> 

<b>Education:</b> 

<select id="education"> 
    <option value="">Select</option> 
    <option value="MBO">MBO</option> 
    <option value="HBO">HBO</option> 
    <option value="University">University</option> 
</select> 

</form>