文本区域因下拉菜单中的所选项目而异

时间:2013-10-15 11:08:41

标签: javascript php html css dom

解决了......你可以关闭......

我有一个下拉菜单和一个文本区域,我在其中以不同方式输入,具体取决于在下拉菜单中选择的项目(动态)。

我的html-php代码是这样的:

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#copyright_titles').change(function () {                
                var isFirstSelected = $("#copyright_titles option:first-child" ).is(':selected');
                var isLastSelected = $("#copyright_titles option:last-child" ).is(':selected');

                if (isFirstSelected) {
                     $('#copyright_text').hide();
                     return;
                }

                $('#copyright_text').attr("readonly",isLastSelected?false:true);


                $.ajax({ type: "GET", url: "copyrights.xml", dataType: "xml", success: function(xml) {

                    $(xml).find('copyright').each(function() {

                      var copyright_title_selected = $("#copyright_titles option:selected").text();
                      var title = $(this).find('title').text();
                      var text = $(this).find('text').text();

                      if (title === copyright_title_selected) {
                          $('#copyright_text').text(text);
                      }

                    });
                  },
                  error: function(request, error, tipo_errore) { alert(error+': '+ tipo_errore); }
                });


                $('#copyright_text').show();
            });
        });
    </script>
</head>
<body>

    <form name="test" action="test.php" method="post">
        <table>
            <tr>
                    <td>Copyright:</td>
                    <td>
                        <select id='copyright_titles'>
                            <?php
                                $xml = simplexml_load_file('copyrights.xml');
                                $i = 0;
                                foreach($xml->copyright as $copyright)
                                {
                                    $i++;
                                    echo '<option value="copyright'.$i.'">'.$copyright->title.'</option>';
                                }
                            ?>
                        </select>
                    </td>
            </tr>
            <tr>
                    <td></td><td>
                        <textarea id='copyright_text' rows="6" cols="65" style="display:none"></textarea>
                    </td>
            </tr>
        </table>
    </form>

</body>

文本来自此xml文件:

<copyrights>
<copyright>
    <title>free</title>
    <text></text>
</copyright>
<copyright>
    <title>copyright1</title>
    <text>text1</text>
</copyright>
<copyright>
    <title>copyright2</title>
    <text>text2</text>
</copyright>
<copyright>
    <title>copyright3</title>
    <text>text3</text>
</copyright>
<copyright>
    <title>other</title>
    <text></text>
</copyright>

3 个答案:

答案 0 :(得分:2)

demo

根据您的代码更改选择列表 HTML:

<select id="selectMe">
   <option value=""></option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
</select>
<br><br><br>

<textarea name="copyright_text" id="copyright_text" cols="20" rows="7">

</textarea>

JS:

$(document).ready(function () {

    $('#selectMe').change(function () {

        $('#copyright_text').html($( "#selectMe option:selected" ).text());

    })
});

答案 1 :(得分:0)

   <select name="copyright_titles" id='copyright_titles'>
                            <?php
                                $xml = simplexml_load_file('copyrights.xml');
                                $i = 0;
                                foreach($xml->copyright as $copyright)
                                {
                                    $i++;
                                    echo '<option value=".$copyright->text.">'.$copyright->title.'</option>';
                                }
                            ?>
                        </select>

// jquery function

$('#copyright_titles').change(function() { $('#copyright_text').attr('val',$('#copyright_titles').val()); });

答案 2 :(得分:0)

最好使用jQuery.Get()方法填充SELECT列表客户端,而不是使用PHP填充服务器端。您可以异步加载XML文件并创建事件处理程序,以更新TEXTAREA更改时的SELECT值。