/ JS

자바스크립트로 select의 value값 가져오기


select태그에서 class네임을 써주는것을 잊지 말자


    <form action="">
      {% csrf_token %}
      <p class="product-filter-start">Price from</p>
      <select name="product-price-start" class="product-price-start" id="">
        <option value="0">전체금액</option>
        <option value="0">0원</option>
        <option value="1000">1000원</option>
        <option value="5000">5000원</option>
        <option value="10000">10000원</option>
        <option value="20000">20000원</option>
        <option value="50000">50000원</option>
      </select>
      <p class="product-filter-end">Price to</p>
      <select name="product-price-end" class="product-price-end" id="">
        <option value="10000000">전체금액</option>
        <option value="10000">10000원</option>
        <option value="20000">20000원</option>
        <option value="50000">50000원</option>
        <option value="100000">100000원</option>
        <option value="10000000">100000원 이상</option>
      </select>
    </form>


자바스크립트에서 selectName.options[selectName.selectedIndex].value를 사용하여 select내부에 있는 option중 선택된 value값을 가져온다

    priceStartSelect = document.querySelector('.product-price-start');
    priceEndSelect = document.querySelector('.product-price-end');
    priceStart = priceStartSelect.options[priceStartSelect.selectedIndex].value;
    priceEnd = priceEndSelect.options[priceEndSelect.selectedIndex].value;