Question

请参阅jsfiddle示例... http://jsfiddle.net/nnmEY/21/

目标...

通过选择菜单和/或通过直接输入修改textarea，并将textarea值传递给div。

...问题

1。）以下示例最底部的脚本在jsfiddle中工作正常但在示例中没有。

2。）我还试图找出关于如何转换＆＃34; \ n＆＃34;的第一个脚本的最佳逻辑。到＆＃34; br＆＃34;将值从.ta（textarea）传递到.tatx（div文本）时。在选择菜单中选择三个或更多选项时，您可以看到问题。我正在考虑使用replaceWith（），但我无法使其工作。

非常感谢任何帮助。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<style>
    li {margin-bottom:7px; background:#DDD; padding:5px;}
    #par {width:350px;}
    .tatx {color:#C00;}
</style>

<div id="par">
<ul>

<li>
Select an option, then, select another option.<br>
<select class="sl">
    <option value="item 1">option 1</option>
    <option value="item 2">option 2</option>
    <option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>
<li>
Select an option, then, select another option.<br>
<select class="sl">
    <option value="item 1">option 1</option>
    <option value="item 2">option 2</option>
    <option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>
<li>
Select an option, then, select another option.<br>
<select class="sl">
    <option value="item 1">option 1</option>
    <option value="item 2">option 2</option>
    <option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>

</ul>
</div>

<script>
$(document).ready(function(){
    $('li > .sl').on('change', function() {
    var taVal = $(this).siblings().find('.ta').val();
    var tatxVal = $(this).siblings('.tatx').html()
    var slVal = $(this).val() + '\n';
    var slHtml = $(this).val() + '<br>';
    $(this).siblings().find('.ta').val(slVal + taVal);
    $(this).siblings('.tatx').html(slHtml + taVal);
});
});
</script>
<script>
$(document).ready(function(){
    $('li > .ta').keyup(function(){
        $(this).next('.tatx').html($(this).val());
    })
});
</script>

Answer 1

实际上jsfiddle样本没有任何问题。你输错了它。因此它称为undefined。也许，这就是你的意思？

这是您的脚本，效果很好：

<div id="par">
    <ul>
        <li>
            <p>Selected options values are passed to textarea</p>
            <select class="sl">
                <option value="item 1">option 1</option>
                <option value="item 2">option 2</option>
                <option value="item 3">option 3</option>
            </select>
            <br />
            <br />
            <p>Selected options values are passed to textarea</p>
            <textarea class="ta"></textarea>
            <div class="tatx">Div Text</div>
        </li>
        <li>
            <p>Selected options values are passed to textarea</p>
            <select class="sl">
                <option value="item 1">option 1</option>
                <option value="item 2">option 2</option>
                <option value="item 3">option 3</option>
            </select>
            <br />
            <br />
            <p>Selected options values are passed to textarea</p>
            <textarea class="ta"></textarea>
            <div class="tatx">Div Text</div>
        </li>
        <li>
            <p>Selected options values are passed to textarea</p>
            <select class="sl">
                <option value="item 1">option 1</option>
                <option value="item 2">option 2</option>
                <option value="item 3">option 3</option>
            </select>
            <br />
            <br />
            <p>Selected options values are passed to textarea</p>
            <textarea class="ta"></textarea>
            <div class="tatx">Div Text</div>
        </li>
    </ul>
</div>

<script>
    $(document).ready(function () {
        $("li > .ta").keyup(function () {
            $(this).next('.tatx').html($(this).val());
        })
    });
</script>
<script>
    $(document).ready(function () {
        $('li > .sl').on('change', function () {
            var taVal = $(this).siblings().find('.ta').val();
            var tatxVal = $(this).siblings('.tatx').html();
            var slVal = $(this).val() + '\n';
            var slHtml = $(this).val() + '\n'+'<br />';
            $(this).siblings().find('.ta').val(slVal + taVal);
            $(this).siblings('.tatx').html(slHtml + tatxVal);
        });
    });
</script>

要查看演示，请再次检查here。或在jsfiddle。

$（this）选择器在jsfiddle中工作，但不在我的脚本上

1 个答案: