텍스트를 사용하여 드롭 다운 목록에서 값 선택

Question

값 또는 색인 대신 텍스트를 사용하여 드롭 다운 목록에서 값을 선택하는 방법은 무엇입니까? html로 :

<select name="category_group" id="category_group" sel_id="" > 
    <option value="0" selected="selected">Kies de rubriek</option> 

    <option value='1000' style='background-color:#dcdcc3;font-weight:bold;' disabled="disabled" id='cat1000' > 

      -- VOERTUIGEN -- 

    </option> 

    <option value='1020' id='cat1020' > 
     Auto's 

    </option> 

    <option value='1080' id='cat1080' > 
     Auto's: Onderdelen 

    </option> 

    <option value='1040' id='cat1040' > 
     Motoren 

    </option> 

    <option value='1140' id='cat1140' > 
     Motoren: Onderdelen 

    </option> 
</select> 

스크립트 :

this.fillSelectors('form[name="formular"]', { 
    'select[name="category_group"]': 'Motoren' 
}, false);  

이 작동하지 않지만, (1140이다) "모토 렌"의 값을 사용하여 작동합니다. fillSelectors를 텍스트와 함께 사용하여 어떻게 작동하게 할 수 있습니까?

Answer 1

CasperJS 'fill 함수는 값을 사용하여 작동합니다. 귀하의 경우에는 표시된 값을 할당 된 옵션 값이 아닌 값으로 설정하려고하기 때문에 이것이 작동하지 않습니다. 비록이 쉽게 확장 할 수 있습니다 :

casper.selectOptionByText = function(selector, textToMatch){ 
    this.evaluate(function(selector, textToMatch){ 
     var select = document.querySelector(selector), 
      found = false; 
     Array.prototype.forEach.call(select.children, function(opt, i){ 
      if (!found && opt.innerHTML.indexOf(textToMatch) !== -1) { 
       select.selectedIndex = i; 
       found = true; 
      } 
     }); 
    }, selector, textToMatch); 
}; 

casper.start(url, function() { 
    this.selectOptionByText('form[name="formular"] select[name="category_group"]', "Motoren"); 
}).run(); 

는 SO 연락처 페이지에서 완벽하게 작동 예를 들어 this code를 참조하십시오.