I am trying to update my bobox values while user changing it.

in html codes:

<select class="bobox" id="recs" name="recs" onchange="changeRecs">
    <option value=5>5</option>
    <option value=10>10</option>
    <option value=20>20</option>
</select>

javascript codes:

$scope.changeRecs = function() {
    //somethings
    $scope.loadTable();
}

Thanks for helping...

I am trying to update my bobox values while user changing it.

in html codes:

<select class="bobox" id="recs" name="recs" onchange="changeRecs">
    <option value=5>5</option>
    <option value=10>10</option>
    <option value=20>20</option>
</select>

javascript codes:

$scope.changeRecs = function() {
    //somethings
    $scope.loadTable();
}

Thanks for helping...

• javascript
• jquery
• html
• select
• bobox

4 Answers 4

There's an error in your syntax:

<select class="bobox" id="recs" name="recs" onchange="changeRecs">
<!-----------------------------------------------------------------^

You forgot the parentesis ().

You just need to do:

document.querySelector("#recs").onchange = function (e) {
  // some things
  alert("Changed");
}

And in jQuery, you do:

$('#recs').on('change', function(){
    //action here
});

Snippet (Vanilla JS)

document.querySelector("#recs").onchange = function (e) {
  // some things
  alert("Changed to " + this.value);
}

<select class="bobox" id="recs" name="recs" onchange="changeRecs">
  <option value=5>5</option>
  <option value=10>10</option>
  <option value=20>20</option>
</select>

Snippet (jQuery)

$('#recs').on('change', function () {
  //action here
  alert("Changed to " + $(this).val());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="bobox" id="recs" name="recs" onchange="changeRecs">
  <option value=5>5</option>
  <option value=10>10</option>
  <option value=20>20</option>
</select>

Using jQuery you would use something like this.

$('#recs').on('click', function(){
    //action here
});

You are almost there. You missed the () in the change attribute:

function changeRecs() {
  alert('has changed');
}

<select class="bobox" id="recs" name="recs" onchange="changeRecs()">
    <option value=5>5</option>
    <option value=10>10</option>
    <option value=20>20</option>
</select>

on change of selection below function vl trigger in jquery. You can use this

 $("#recs").change(function() { 
    //perform the operation whatever u required 
 });