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

Text area that varies depending on the selected item in the dropdown menu

本文关键字：区域 下拉菜单 文本      更新时间：2023-09-26

已解决...您可以关闭...

我

有一个下拉菜单和一个文本区域，我在其中输入不同的文字，具体取决于在下拉菜单中选择的项目（动态）。

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

演示

根据您的代码开玩笑地更改选择列表.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());
    })
});

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

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

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

相关文章：