CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjson
user1648449
user1648449

Reputation: 97

showing selections from drop downs in a table

i have set of drop downs with a select button below. what i want to try to do is once the user has been through the three drop downs and pressed select, the option that is chosen is shown in a corresponding table in its assigned category

HTML:

<form method="POST">
<select  name='first' id='first'>
    <option selected="selected" value="nothing">choose</option>   
    <option value='opt_a'>opt a</option>
    <option value='opt_b'>opt b</option>
</select>
<select name='sec' id='sec'>
</select>
<select name='third' id='third'>
</select>
<br />
<br />
<button id="select_btn" type="select" name="select">select</button>
<br />
<br />
<div id="result">
<table>
    <tr>
       <th>category</td>
       <th>choice</td>
    </tr>
    <tr>    
       <td>choice 1</td>
       <td></td>
    </tr>
    <tr>
       <td>choice 2</td>
       <td></td>
    </tr>
    <tr>
       <td>choice 3</td>
       <td></td>
    </tr>
    <tr>
       <td>choice 4</td>
       <td></td>
    </tr>
    <tr>    
       <td>choice 5</td>
       <td></td>
    </tr>
    <tr>
       <td>choice 6</td>
       <td></td>
    </tr>
    <tr>
       <td>choice 7</td>
       <td></td>
    </tr>
    <tr>
       <td>choice 8</td>
       <td></td>
    </tr>
</table>
</div>
</form>

JS:

data = {
opt_a: ['choose_1','choose_2','choose_3','choose_4'],
opt_b: ['choose_5','choose_6','choose_7','choose_8'],
choose_1: ['yes','no','unsure','still unsure'],
choose_2: ['yes','no','unsure','still unsure'],
choose_3: ['yes','no','unsure','still unsure'],
choose_4: ['yes','no','unsure','still unsure'],
choose_5: ['a','b','avg','unclear'],
choose_6: ['a','b','avg','unclear'],
choose_7: ['a','b','avg','unclear'],
choose_8: ['a','b','avg','unclear']
}

$('#first').change(function(){
var firstopts = ''
$.each(data[$(this).val()],function(i,v){
    firstopts += "<option value='"+v+"'>"+v+"</option>"
}) 
$('#sec').html(firstopts)
})


$('#sec').change(function(){
var secopts = ''
$.each(data[$(this).val()],function(i,v){
    secopts += "<option value='"+v+"'>"+v+"</option>"
}) 
$('#third').html(secopts)
})

CSS:

select{width:150px;}

#result{width:450px; border:2px solid #234323;}

td{width:225px; text-align:center}

th{background:#656454; color:#eee; text-align:center}

Thank You in advance for any help.

Upvotes: 0

Views: 130

Answers (1)

mgibsonbr
mgibsonbr

Reputation: 22007

Since your data keys are called choose_N and your columns have the text choice N, you can match them by splitting the value and getting the last part:

var number1 = 'choose_1'.split('_')[1];
var number2 = 'choice 1'.split(' ')[1];
return number1 == number2; // corresponding choice

You could also annotate your HTML with the corresponding value, if you want something more exact:

<tr data-choice="choose_1">
   <td>choice 1</td>
   <td></td>
</tr>

$(myselector).data("choice"); // Will return "choose_1"

Now all you have to do is to select the right row (the one that corresponds to the value currently selected in #sec) and set the second column to the value currently selected in #third. You could do it on the click callback of the select button, but a better option is to do it on $('#third').change directly (so the user is saved from one extra button press):

$('#third').change(function() {
    $('table tr').filter(function() {                                // Filters the rows, by:
        var number1 = $('#sec').val().split('_')[1];                 // comparing the value at #sec
        var number2 = $(this).find('td:eq(0)').text().split(' ')[1]; // with the text of the first column.
        return number1 == number2;
    }).find('td:eq(1)').text($(this).val()); // Updates the second column.
});

Working example at jsFiddle. The only caveat is that, if the user wants to select the first option (the one already selected), he'll have to change it and change again for the event to trigger (in this sense, a select button is cleaner).

if you still want to do that only on button press, just replace $('#third').change(...) with $('#select_btn').click(...) (Edit: and $(this) to $('#third')). You might also have to use event.preventDefault, so the form isn't submitted.

Upvotes: 1

Related Questions