选择框填充textarea

时间:2013-07-11 21:35:44

标签: javascript jquery

我有一个代码,允许您从选择框中选择选项。

每个选项都应在字段TEXTAREA

中打印不同的文本

我做错了什么?我应该改变什么?

<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>

1 个答案:

答案 0 :(得分:3)

根据您访问该值的方式,您应该从数组更改为object,因为您尝试访问具有不以此方式工作的属性名称的数组,您只能在数组上使用index,但是你可以通过centerLocations["text" + address]

在一个对象上完成它
var centerLocations = {
    text1: 'some text1',
    text2: 'some text2',
    text3: 'some text3'
};

<强> Fiddle

使用数组或对象可以实现2种方法。

使用Array(仅当您的选项索引与数组项索引的索引匹配时)

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

使用对象

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

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

<强> Demo