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!

Improve this question
3
  • What happened to those assignments? Commented Jul 7, 2013 at 8:43
  • is this a multi select box? Commented Jul 7, 2013 at 8:44
  • It is not multi select Commented Jul 7, 2013 at 8:45

2 Answers 2

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I need each retrieved value to be written in separate input.
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/

Improve this answer

10 Comments

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!
@V0rtex what do you mean empty inputs afters selecting other option? are u gonna empty the text boxes every time you choose an option?
@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.
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!
will u prepopulate the inputs before hand with the option text?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.