1

I'm retrieving some data from MySQL and write it in certain select tags, then i retrieve every selected option value and display it in a DIV, here is the javascript:

 function main() {
 $("select").change(function () {
 var str = "";

 $("select option:selected").each(function () {
    str += $(this).text() + " ";
  });

 $("div#one").text(str);
 })
  .trigger('change');

  }

So, i want each retrieved value to be written in separate input:

First value: <input type="text" id="test" />
Second value: <input type="text" id="test2" />
Third value: <input type="text" id="test3" />

How can i do that? Many thanks!

Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63

2 Answers2

1

Simple select always have a selected value, so you can try something like this:

$(function() {
    $("select").change(function() {
        var str = "";
        $("select").each(function() {
            str += $(this).val()+"<br/>";
        });
        $("div#one").html(str);
    });
});

You can see in action here: http://jsfiddle.net/vJdUt/

Pierre
  • 53
  • 6
0

For adding the selected options in a "div" tag:

//empty div at start using .empty()
$("select").change(function () {
    //get the selected option's text and store it in map
    var map = $("select :selected").map(function () {
        var txt = $(this).text();
        //do not add the value to map[] if the chosen value begins with "Select"
        return txt.indexOf("Select") === -1 ? txt + " , " : "";
    }).get();
    //add it to div
    $("#one").html(map);
});

For adding the selected options in an "input" tag:

//empty textboxes at start using .val("")
$("select").change(function () {
    var text = $(":selected", this).text() //this.value;
    //get the index of the select box chosen
    var index = $(this).index();
    //get the correct text box corresponding to chosen select
    var $input = $("input[type=text]").eq(index);
    //set the value for the input
    $input.val(function () {
        //do not add the value to text box if the chosen value begins with "Select"
        return text.indexOf("Select") === -1 ? text : "";
    });
});

Consolidated demo

http://jsfiddle.net/hungerpain/kaXjX/

krishwader
  • 11,341
  • 1
  • 34
  • 51
  • It works, but i need to load the text that is between option tag not the value, because the value is the id for next select, it's same as in my code above but i need it in separate input. Also, can you show me how do i empty inputs afters selecting other option? Many thanks! –  Jul 07 '13 at 09:23
  • @V0rtex what do you mean **empty inputs afters selecting other option**? are u gonna empty the text boxes every time you choose an option? – krishwader Jul 07 '13 at 09:27
  • @V0rtex check my second section now.. it might be what u want.. if all the text boxes are full, when choosing an option it will empty all the inputs and start from scratch. – krishwader Jul 07 '13 at 09:34
  • Yes, in other words i need to link first select option text with a certain input, second with another input and third with another and when any of selected option is changed text in its input also changes. Like first selected option from first select list fill first input in its way or something like this. Again many thanks for help! –  Jul 07 '13 at 09:38
  • will u prepopulate the inputs before hand with the option text? – krishwader Jul 07 '13 at 09:41
  • No, it will be empty. This is the link to this script in realtime [link](http://thesystem.pagekite.me/list/). –  Jul 07 '13 at 09:46
  • This works perfectly, thanks, but the problem is that first option's text isn't simple text, it's received through PHP variable (array) and the javascript can't read and write the value from this PHP variable (array) to input, it's able to write only the value witch is ID not text. So how can i pass that text from PHP variable (array) to javascript. You can see the script and the source right here: [link](http://thesystem.pagekite.me/list/) –  Jul 07 '13 at 21:07
  • @V0rtex, maybe you could use the approach used here : http://stackoverflow.com/questions/1745704/jquery-populate-items-into-a-select-using-jquery-ajax-json-php – krishwader Jul 08 '13 at 00:21
  • If you think this has helped you pls consider marking it as the right answer :-) also up vote if you think this will help others :-) – krishwader Jul 09 '13 at 04:57
  • Ok, i din't try that method explained there in your last link, i just rewrite the code for required variable to be written not into input, but into a textarea, so i can receive the data through PHP mail. Again many many thanks for your help, answer was incredible RIGHT! –  Jul 09 '13 at 13:20