I have two boboxs.i want to set second bobox values on the basis of first bobox values on change.like if i three values (1,2,3) for first one and on select 1 i populate second one with values (11,12,13) and same for others.I can do it in php but don't know how to do it in js or jquery.Thanks

I have two boboxs.i want to set second bobox values on the basis of first bobox values on change.like if i three values (1,2,3) for first one and on select 1 i populate second one with values (11,12,13) and same for others.I can do it in php but don't know how to do it in js or jquery.Thanks

• javascript
• jquery
• bobox

Share Improve this question Follow asked Mar 17, 2014 at 18:26 AddaAdda 30555 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here is how you can do this:

JavaScript

var first = document.getElementById('select-input'),
    second = document.getElementById('second-select-input');

first.onchange = function (e) {
  var val = e.target.value;
  empty(second);
  for (var i = 0; i < 3; i += 1) {
    addOption(val + '' + (i + 1), second);
  }
};

function empty(select) {
  select.innerHTML = '';
}

function addOption(val, select) {
  var option = document.createElement('option');
  option.value = val;
  option.innerHTML = val;
  select.appendChild(option);
}

HTML

<select id="select-input">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="second-select-input">
</select>

DEMO