CODEWITHSUNDEEP
javascriptjquery
Supersonic
Supersonic

Reputation: 430

change select box option based on variable's output

Hi guys I am learning javascript & jquery and have a fairly simple question i cant figure out. I have a 3 checkbox where my function is invoked on click. 

<div id="status_selected">
    <input type="checkbox" value="internal" onclick="myFunction()" 
           name="status[]" id="status_">internal            
    <input type="checkbox" value="external" onclick="myFunction()"
           name="status[]" id="status_">external
    <input type="checkbox" value="normal" onclick="myFunction()"
           name="status[]" id="status_">normal
</div>

Here is a select box who's options should be filled depending on whats selected in the above checkbox.

<select id="display_status" style = "display:none;"></select>

So if internal and external is checked then the options to the above select box should be the same and if it changes then it should as well.

<script>
function myFunction() {
    var names = [];
    $('#status_selected input[type="checkbox"]:checked').each(function (i, el) {
        names.push(el.value);
    });
    document.getElementById('display_status').style.display = 'block';
    document.getElementById('display_status').innerHTML =
        '<option value="1">1</option><option value="2">2</option>';
}
</script>

This is the function I have written above and I am able to get all the names checked in the names variable but i don't know how to pass it to the innerHTML as options. Currently i have hard coded option 1 and 2. How to pass the variable values to it.

Thanks for any help

Upvotes: 0

Views: 184

Answers (3)

Satpal
Satpal

Reputation: 133453

As you are using jQuery. Do it completely using it.

HTML

<div id="status_selected">
    <input type="checkbox" value="internal" name="status[]" />internal
    <input type="checkbox" value="external" name="status[]" />external
    <input type="checkbox" value="normal" name="status[]" />normal</div>
<select id="display_status" style="display:none;"></select>

Code

$(document).ready(function () {
    $('#status_selected input[type="checkbox"]').on('change', function () {
        $('#display_status').empty(); //Clear previous HTML
        $('#status_selected input[type="checkbox"]:checked').each(function (i, el) {
            //Append option to select
           $('#display_status').append("<option value="+el.value+">"+el.value+"</option>");
        });
        $('#display_status').show(); //Show select
    });
});

DEMO

Reference:

  1. .show()
  2. .empty()
  3. .append()

Upvotes: 2

Milind Anantwar
Milind Anantwar

Reputation: 82241

Try this:

function myFunction()
{
var html="";
$('#status_selected input[type="checkbox"]:checked').each(function (i, el){
  html+="<option value="+el.value+">"+el.value+"</option>";
});
 document.getElementById('display_status').style.display='block';;
 document.getElementById('display_status').innerHTML=html;
}

You can narrow down the whole thing to:

function myFunction(){
$('#display_status').empty();
$('#display_status').css('display','block')
 $('#status_selected input[type="checkbox"]:checked').each(function (i, el){
  $('#display_status').append("<option value="+el.value+">"+el.value+"</option>");
 });}

Upvotes: 1

Linga
Linga

Reputation: 10573

Use map function on names array and build options like this:

names.map(function(name){
    $('#display_status').append('<option value="'+name+'">'+name+'</option>');
});

and Instead of 

document.getElementById('display_status').style.display = 'block';

You can simply use Jquery as

$('#display_status').show();

Upvotes: 1

Related Questions