Question

我想创建一个包含多个下拉菜单的表单，根据您在每个下拉菜单中单击的内容，会创建一段段落。

例如：

下拉菜单1＆gt;＆gt;如果您选择选项1＆gt;＆gt;选项一将有一个特定的句子与它相关联，它会将它添加到一个段落，然后显示在表格的底部，以便复制和粘贴到其他地方

下拉菜单2＆gt;＆gt;选择选项2＆gt;＆gt;在第一个下拉菜单中添加的句子之后，将添加选项的相关句子。

我希望这是有道理的...... 我没有包含任何示例代码，因为我在创建表单时非常陌生，甚至不确定如何启动一个可以像这样运行的代码。

谢谢！

Answer 1

这是另一种解决方案，仍然使用jQuery（如果你想要纯粹的JS让我知道，我从那开始，但现在似乎是“uncool”:)。

<select id="sel_1" name="select">
    <option class="first" value="value1">This is the first set of text</option>
    <option value="value2" selected>Second set of text, it will do nothing</option>
</select>
<select id="sel_2" name="select">
    <option value="value1">This is the first set of text in dropdown #2</option>
    <option value="value2" selected>Second set of text in dropdown#2, it will do nothing</option>
</select>
<textarea id="blockoftext"></textarea>

// Just setting these here...
var $first_dropdown = $('#sel_1');
var $second_dropdown = $('#sel_2');
var $textarea = $('#blockoftext');

// This is the first option in the first dropdown menu, the one that is 
// a prerequisite; there may be a better way to do this though...

var $first_option = $first_dropdown.find('option').first();

$first_dropdown.on('change', function () {
    if ($('option:selected', this).html() === $first_option.html()) {
        $textarea.text($('option:selected', this).html());
    }
});

$second_dropdown.on('change', function(){
    // If option one's text was added already
    if ($('#blockoftext').html() === $first_option.html()){
           $('#blockoftext').append($('option:selected', this).html())
    }
});

毫无疑问，您可以比较/检查一些其他方法以确保选择器存在。在这里查看JS Fiddle：）

http://jsfiddle.net/zu64ord3/2/

Answer 2

这是一个可行的解决方案

$('span').hide();
$('#selectone').on('change',function(){
    var opt=$(this).val().toLowerCase();
    $('.first').hide();
    $('.first.'+opt).show();
});
$('#selecttwo').on('change',function(){
    var opt=$(this).val().toLowerCase();
    $('.second').hide();
    $('.second.'+opt).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select id='selectone'>
    <option></option>  
    <option id='optionone'>One</option>   
    <option id='optiontwo'>Two</option> 
    <option id='optionthree'>Three</option> 
    <option id='optionfour'>Four</option> 
</select>
<select id='selecttwo'>
    <option></option> 
    <option id='optionone'>One</option>   
    <option id='optiontwo'>Two</option> 
    <option id='optionthree'>Three</option> 
    <option id='optionfour'>Four</option> 
</select>

<div id='text'><span class='first one'>farkle </span><span class='first two'>barnacle </span><span class='first three'>farm </span><span class='first four'>git </span><span class='second one'>javascript </span><span class='second two'>fiddle </span><span class='second three'>lalalal </span><span class='second four'>conflict </span></div>

如何创建一个基于下拉选项创建段落的Javascript表单？

2 个答案: