MUltiple IDs Jquery

[yankeefan24]

Im creating a form that every time you select a drop down menu option it will write the value to a text box
I have the writing part working. The problem is that is writting to both text boxes when I select on dropdown and it it suppose to be writing to one text box when you select one drop down and so fort

here is the link to the code

http://jsfiddle.net/jencinas69/ytXnC/

http://jsfiddle.net/ytXnC/1/

**Note there is a bug, if you choose option 1 for both FIRST time it doesn't display anything.

[yankeefan24]

I had tried that before is there any way of achiving what I want using something like this?

$("#data, #data2").change(function(){

var item = $(this).val();        
$("#dataval, #dataval2").val(item);


});

For that reason it might be safer to use a click event

http://jsfiddle.net/ytXnC/3/

[yankeefan24]

The problem is that I have like 30 drop downs that is why I wanted to use only one function with multiple IDs

<script>
$("#data, #data2").click(function(){

var item = $(this).val();        
$("#dataval, #dataval2").val(item);


});

</script>

<select id="data">
    <option value="">Please Select...</option>
    <option value="1">Fully Successfuly
    <option value="2">Exceptional
        <option value="3">Needs Improvement</option>
</select>
<input type="text" id="dataval" /><br>
<br>
<select id="data2">
    <option value="">Please Select...
    <option value="1">Fully Successfuly
    <option value="2">Exceptional
        <option value="3">Needs Improvement</option>
</select>





    <input type="text" id="dataval2" />

maybe:

http://stackoverflow.com/questions/7861237/jquery-multiple-ids-same-function

[yankeefan24]

I used that as an example but Im not getting anywhere

If your indexes match up for the dropdowns and the textboxes:

$("select").change(function(){
  ind = $('select').index(this);
  selVal = $(this).children("option").filter(":selected").text();  
    $('input:text:eq(' + ind + ')').val(selVal);  
});

I tried to avoid using ids and classes, so this should work if there aren't any dropdowns or textboxes before the relevant ones. Also if there are any other dropdowns, it'll run the function. You can always class-ify them though.

[yankeefan24]

diafol I have like 30 drowdown Im using in my form and all of theme have to return a value

Yeah, so should work then?

Very nice diafol, like I said the only bug is if he selects the first one...

So using a click event might be more reliable?

[yankeefan24]

Can you implement what your example here
http://jsfiddle.net/jencinas69/ytXnC/

http://jsfiddle.net/bSC5T/

I forked you

//edit @iamthwee

seems to work for me (with caveats already mentioned)

[yankeefan24]

Great, but I need to return Value to the input box

@diafol Sorry to hijack this but with such a glaring bug using .change seems inferior to .click.

(i.e If user first time selects option one nothing gets dumped in the text box)

Am I missing something?

What the number value? Darn, that's even easier:

http://jsfiddle.net/bSC5T/3/

Also as iamthwee points out, a click makes more sense if there is no initial value in the textbox.

$("select").click(function(){
  ind = $('select').index(this);
  selVal = $(this).val();  
    $('input:text:eq(' + ind + ')').val(selVal);  
});

You could place an initial value of '1' into each textbox and keep it as change()

[yankeefan24]

I added a select as first option with no value and that solved that problem
http://jsfiddle.net/jencinas69/bSC5T/4/

Ah, so you did want the text. Cool.

Solved?

[yankeefan24]

Solved

[yankeefan24]

Lets say I wanted to write the Value to a td instead of an input area, is it possible

[yankeefan24]

like td span etc

yep, however, it depends on the table structure whether you could use the same type of code. You may find it easier to use the DOM traversing functions, like next()

http://jsfiddle.net/bSC5T/10/

$("select").change(function(){
  selVal = $(this).children("option").filter(":selected").text();
    $(this).parent().next('td').html(selVal);  
});


//no need for the index as posted in the fiddle

[yankeefan24]

I need to present the value result in a table like this

<table border="1"> 
<tr><th>Fully Successfull</th><th>Exceptional</th><th>Needs Improvement</th></tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>



</table>

Next TD is not working

[yankeefan24]

SOmething like this?

<select id="data">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

<br>
<br />
<select id="data2">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

<br />
<select id="data3">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

<br />
<select id="data4">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

<br />
<select id="data5">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

    <table border="1"> 
<tr><th>Fully Successfull</th><th>Exceptional</th><th>Needs Improvement</th></tr>
<tr>
<td>
<span id="dataval"></span>
</td>
<td>
<span id="dataval2"></span>
</td>
<td>
<span id="dataval3"></span>
</td>
</tr>
<tr>
<td>
<span id="dataval4"></span>
</td>
<td>
<span id="dataval5"></span>
</td>

</tr>


</table>

Here's an alternative, using a grid referencer (row from select index and column from option index):

http://jsfiddle.net/bSC5T/12/

I've used bullets to identify the answer, but you can easily add css to change backgrounds etc. With this, you don't need the full text if that's in the heading already. You could change the bullet to a tickmark, whatever - may look better.

$("select").change(function(){
    col = $(this).val();
    row = $('select').index(this);
    $("tr:eq(" + (row + 1) + ") > td").html(''); //must be a better way than this
    $("tr:eq(" + (row + 1) + ") > td:eq("+ (col) + ")").html('•');
});


<table border="1"> 
        <tr><th>Unanswered</th><th>Fully Successfull</th><th>Exceptional</th><th>Needs Improvement</th></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
</table>

If this is the only table in the page, it should work. Also notice the lack of spans.

//EDIT

Something like this:

http://jsfiddle.net/bSC5T/14/

If you are going down this route, then it may be better to just do a checkbox type thingy - where you can just click on a td cell to select.

[yankeefan24]

Is working fine in fiddle but Whe I transfer to my select statems inside grid 960. The position of the checkmarks is out of order

Could you show a screenshot?

[yankeefan24]

I cannot add a printscreen here. give me your email

Files in the editor toolbar? Otherwise, can you uplaod a pic somewhere and link to it? I'm afraid I don't give out my email.