Jquery append when option from dropdown list clicked

Question

Why doesn't this work?

     <script>
     $(document).ready(function(){
     $('#custom_field option').click(function(){
        $('#custom_field_input').append('<tr><td></td></tr>');      
        $('#custom_field_input td:last').append($(this).find(":selected").text());
     });
     });
     </script>

I found out that there is a .change function for this and it works but does not relate to me as i need to have the text appended even if there is no change in the value of the select dropdown.

Meaning.

User clicks on option1, appends option1 text.

User clicks on option 1 again, another option 1 text gets appended.

You need "User clicks on option1, appends option1 text. User clicks on option 1 again, another option 1 text gets appended."?? — GautamD31, Sep 11 '12 at 11:05
something simmilar to http://stackoverflow.com/questions/898463/fire-event-each-time-a-dropdownlist-item-is-selected-with-jquery — Gyan Chandra Srivastava, Sep 11 '12 at 11:09
Just dun understand why **.change** is okay but **.click** isn't — Lawrence, Sep 11 '12 at 13:01

score 0 · Answer 1 · answered Sep 11 '12 at 11:05

Make the custon_field_input element on click of custom_field_opotion as empty with following code :

<script>
 $(document).ready(function(){
 $('#custom_field option').click(function(){
  $('#custom_field_input').html('');      
    $('#custom_field_input').append('<tr><td></td></tr>');      
    $('#custom_field_input td:last').append($(this).find(":selected").text());
 });
 });
 </script>

Surace · Answer 2 · 2012-09-11T15:28:32.400

0

<script>
 $(document).ready(function(){
 $('#custom_field').change(function(){
    $('#custom_field_input').append('<tr><td></td></tr>');      
    $('#custom_field_input td:last').append($(this).val());
 });
 });
 </script>

this should work in your case as well

edited Sep 11 '12 at 15:28

answered Sep 11 '12 at 11:06

Surace

701
3
8

no. The .change method doesn't work as i need it on every click – Lawrence Sep 11 '12 at 12:41

score 0 · Answer 3 · answered Sep 11 '12 at 11:06

Try

 <script>
     $(document).ready(function(){
     $('#custom_field option').click(function(){
     $('#custom_field_input').html('');      
     $('#custom_field_input').append('<tr><td></td></tr>');      
     $('#custom_field_input td:last').append($(this).find(":selected").text());
 });
 });
</script>

score 0 · Answer 4 · answered Sep 11 '12 at 11:10

0

you can also get help from

http://www.guy.footring.net/randomStuff/selectBox.htm

answered Sep 11 '12 at 11:10

Gyan Chandra Srivastava

1,370
9
29

score 0 · Answer 5 · answered Sep 11 '12 at 14:20

0

You can use blur or focusout events instead of click.

$('#custom_field option').focusout(function(){
....
 });   

$('#custom_field option').blur(function(){
....
 });

answered Sep 11 '12 at 14:20

Nandakumar V

4,317
4
27
47

score 0 · Answer 6 · answered Sep 11 '12 at 16:32

0

Try This.

jQuery(function () {
    jQuery('#custom_field').click(function () {
        jQuery("#custom_field_input").val(jQuery("#custom_field_input").val() + jQuery("option:selected", this).text());
    });
});

answered Sep 11 '12 at 16:32

Krishna Kumar

2,101
1
23
34

score 0 · Answer 7 · answered Oct 24 '12 at 05:00

Try this: Made 2 changes. Used live incase your selects are getting populated later dynamically. If not use simple .click(). Also instead of .find(":selected"), use .find("option:selected").

<script>
 $(document).ready(function(){
 $('#custom_field option').live('click',function(){
    $('#custom_field_input').append('<tr><td></td></tr>');      
    $('#custom_field_input td:last').append($(this).find("option:selected").text());
 });
 });
 </script>

Jquery append when option from dropdown list clicked

7 Answers7