CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
billel spinoo
billel spinoo

Reputation: 47

Drop down list works only the first time when I click then it doesn't change the value

I have a script that should automatically change the value when drop down list selection is changed, and it works first time I change the value, but second time it does not work (after I try to select different value from the one I selected previously)

Here is the HTML:

<input id="search" placeholder="Search..." type="text"/> 

<label for="showbrand" class="filter">Brand:<select id="showbrand" data-bind=''>
<option value="">--select--</option>
<option value="">All</option>
</select></label>
<label for="showfrom" class="filter">From:<input type="date" id="showfrom"></label>
<label for="showto" class="filter">To:<input type="date" id="showto"></label>           
<a id="filterList" class="btn btn-primary pull-right" onclick="clickFilter();">Find</a><table id="dataTable" class="table table-condensed table-bordered">
<thead>
<tr>
<th>Campaign</th>
<th>Brand</th>
<th>Starts On</th>
<th>Ends On</th>
<th>Files</th>
<th>Edit</th>   
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="msg"></div>

JS:

$("#showbrand").change(function(){
var info = new Array();
info[0] = $("#showbrand").val();
if($("#showfrom").val() !== '' && 
$("#showto").val() !== ''){
info[1] = 'yes';
}
else{
info[1] = 'no';
}
info[2] = $("#showfrom").val();
info[3] = $("#showto").val();
info[4] = $("#search").val();

listCampaignsFiltered(info, 'dataTable', 0);
});



unction listCampaignsFiltered(info, tableName, limit){
var params = "&brand="+info[0]+
"&daterange="+info[1]+
"&from="+info[2]+
"&to="+info[3]+
"&limit="+limit+
"&search="+info[4];
$.getJSON(LOCAL_URI+"?action=campaignfiltered"+params, function(result) {
//console.log(JSON.stringify(result));
$('#'+tableName+" tbody").html('');
if(result.length > 0){
$("#msg").html(result.length+ " Records found.");
$.each(result, function(){
var $tr = '<tr><td>'+ this.campaign + "</td><td>"+
this.brandName+"</td><td>"+this.startson+
"</td><td>"+ this.endson +"</td></tr>";    
$('#'+tableName+" tbody").append($tr);
});
}
else{
$("#msg").html('No records found.');
}
});
}

Upvotes: 0

Views: 1849

Answers (2)

Pragnesh Khalas
Pragnesh Khalas

Reputation: 2898

Yes you should assign the value in dropdown and also correct your syntax in jquery. I think below code will help you

<script type="text/javascript" language="javascript" >
    $(document).ready(function () {
    $("#showbrand").change(function () {
        var info = new Array();
        info[0] = $("#showbrand").val();
        alert(info[0]);
    });
    });

</script>

<label for="showbrand" class="filter">Brand:
 <select id="showbrand" data-bind=''>
    <option value="1">--select--</option>
    <option value="2">test</option>
    <option value="3">All</option>
 </select>
</label>

Upvotes: 0

Jasper
Jasper

Reputation: 76003

For your select element to change, you might need distinct values, otherwise no matter what you choose as your option, it'll always have the same value.

I've never setup a select element without values so I'm not 100% sure this is your issue. Please let me know if this happens to be the issue, otherwise I'll remove the answer.

Also, your JS needs a closing ) to be valid.

Upvotes: 1

Related Questions