2014-04-16 2 views
0

이 질문은 아주 기본적인 질문 일 뿐이며 js 및 jquery를 사용하기 시작 했으므로 오래 기다려주십시오. Javascript onchange function

<html> 
<head> 
</head> 
<body> 
<form method="post" action="module.php"> 
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value"> 
     <option value > Select Duration </option> 
     <option value="/module.php/?dateRange=1d">Last 24 Hours</option> 
     <option value="/module.php/?dateRange=2d">Last 2 Days</option> 
     <option value="/module.php/?dateRange=1w">Last Week</option> 
     <option value="/module.php/?dateRange=2w">Last 2 Weeks</option> 
     <option value="/module.php/?dateRange=1m">Last Month</option> 
     <option value="/module.php/?dateRange=3m">Last 3 Months</option> 
     <option value="/module.php/?dateRange=6m">Last 6 Months</option> 
     <option value="/module.php/?dateRange=1y">Last Year</option> 
     <option value="/module.php/?dateRange=all">All</option> 
</select> 
</form> 
</body> 
</html> 

가 지금은 내 모든 쿼리를 수행하고 사용자가 드롭 다운 목록에서 값을 선택하면 내 결과를 dispplay 수있는 onchange를 함수를 작성하는 방법을 이해하고 있지 않다 -

여기에 코드 내 일부입니다. 그런 다음 선택한 값을 변수에 저장하고 그 값을 같은 페이지에서 사용하고 싶습니다.

답변

2

선택 입력에 mySelect이라는 ID를 부여합니다.

은 그럼 당신은 정의 할 수 있습니다

<script type="text/javascript"> 

$('#mySelect').on('change', function() { 
    // do your thing 
}); 

</script> 

(가) 위의 요소에 onchange 이벤트 (jQuery를) 부착 및 사용자가 선택을 변경 때마다 트리거됩니다.

+0

가 나는 A [바이올린] 생성 ... 같은 일 시도 (http://jsfiddle.net/pooja1110/rxh43/1/) 한번 이상 실행이 에러를 범 ..하지만에 브라우저는 경고 메시지를 표시하지 않으며 또한 드롭 다운 목록에서 옵션을 선택하면 URL이 변경되지만 "기간 선택"이 표시됩니다 – Satish

+0

@Satish 확실합니까? 귀하의 바이올린 완벽하게 작동합니다 :) –

+0

@ Satish 일이 유일한 선택은 가치를 발생합니다. 정확히 무엇을 선물 하시겠습니까? –

1

당신은이 fiddle :

그것은 선택의 변화와 val()을 감지하기

$('#duration').on('change', function() { 
    var selectedEl = $('#duration').val(); 
    console.log(selectedEl); 
}); 

를 사용하는 당신에게 만든

<html> 
<head> 
</head> 
<body> 

<form method="post" action="module.php"> 
    <select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value"> 
     <option value > Select Duration </option> 
     <option value="/module.php/?dateRange=1d">Last 24 Hours</option> 
     <option value="/module.php/?dateRange=2d">Last 2 Days</option> 
     <option value="/module.php/?dateRange=1w">Last Week</option> 
     <option value="/module.php/?dateRange=2w">Last 2 Weeks</option> 
     <option value="/module.php/?dateRange=1m">Last Month</option> 
     <option value="/module.php/?dateRange=3m">Last 3 Months</option> 
     <option value="/module.php/?dateRange=6m">Last 6 Months</option> 
     <option value="/module.php/?dateRange=1y">Last Year</option> 
     <option value="/module.php/?dateRange=all">All</option> 
</select> 
</form> 

<script> 
$(document).ready(function() { 

$("select") 
    .change(function() { 
    alert('OnChange happened'); 
    //you can add your stuff here 
    }); 
    }) 

}); 
    </script> 
</body> 
</html> 
+0

혼란 스럽습니다 ... –

+0

어떤 부분이 혼란 스럽습니까? 나는 그 질문에 주어진 동일한 폼 코드를 사용하여 핸들러를 만들려고했다. (사용자가 핸들러 코드를 추가 할 수있는 방법을 쉽게 이해할 것이라고 생각한다.)하지만 원하는 경우 편집 할 수있다. –

0

선택한 옵션을 얻을 수있는 핸들러를 사용합니다 .

0
Instead of this : 
    <select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value"> 
Try This : 
    <select name="dateRange" size="1" onchange="submit();"> 

And in 'MODULE.php' get the selected value using : 
    $var = $_POST['dateRange']; 
    echo $var; 

And then write your query..