CODEWITHSUNDEEP
javascriptjquery
Roi
Roi

Reputation: 25

select box fill textarea

I have a code that allow you to choose option from selectbox.

Each choice should print different text in filed TEXTAREA

What did I do wrong? what should I change?

<script src="jquery.js"></script>
<form name="form1">
    <fieldset name="Group1">
        <legend>Group box</legend>Center Title:
        <select name="ctrTitles" id="ctrTitles">
            <option value="1">Corp 1</option>
            <option value="2">Shamrock Gold</option>
            <option value="3">Hensin Way</option>
        </select>
        <br />
        <br />
        Address 1:
        <textarea name="TextArea1" id="TextArea1" cols="20" rows="2"></textarea>
        <br />
    </fieldset>
</form>
<script>
    var centerLocations = new Array({
        text1: 'some text1'
    }, {
        text2: 'some text2'
    }, {
        text3: 'some text3'
    });

    $('#ctrTitles').change(function() {
        address = $(this).val()
        val = $(":selected", this).index();
        $("#TextArea1").val(centerLocations["text" + address]);

    });
</script>

Upvotes: 0

Views: 975

Answers (1)

PSL
PSL

Reputation: 123739

With the way you are accessing the value you should change to object from array, because you are trying to access an array with the property name which doesn't work that way, you can only use index on array, but you can do it on an object by doing centerLocations["text" + address]:

var centerLocations = {
    text1: 'some text1',
    text2: 'some text2',
    text3: 'some text3'
};

Fiddle

2 ways you can do it with array or object.

using Array(only if your index of option matches that of the array item index)

var centerLocations = [
  'some text1' //you can even get rid of text1, text2 etc..
,  'some text2'
, 'some text3'
 ];

$('#ctrTitles').change(function () {
    $("#TextArea1").val(centerLocations[this.selectedIndex]);

   //with your original structure you would do
   //$("#TextArea1").val(centerLocations[this.selectedIndex]['text'+this.value]);

}).change();

Demo

Using object

var centerLocations = {
    text1: 'some text1',
    text2: 'some text2',
    text3: 'some text3'
};

$('#ctrTitles').change(function () {
    $("#TextArea1").val(centerLocations["text" + this.value]);
}).change();

Demo

Upvotes: 3

Related Questions