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

How to create a Javascript form that creates a paragraph based on dropdown choices?

本文关键字：创建 段落 选项 表单 于下拉 Javascript 何创建 一个      更新时间：2023-09-26

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

例如：

下拉菜单1>>如果您选择选项1>>选项1将有一对特定的句子与之关联，并将其添加到一个段落中，然后显示在表单底部，以便复制并粘贴到其他位置

下拉菜单2>>选择选项2>>选项的关联语句将添加在从第一个下拉菜单添加的语句之后。

我希望这是有道理的。。。我没有任何示例代码可以包含，因为我对表单的制作非常陌生，甚至不知道如何启动这样的表单。

谢谢！

这里有另一个解决方案，仍然使用jQuery（如果你想要纯JS，请告诉我，我从这个开始，但现在看起来"不酷"：）。

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

这里有一个可行的解决方案

$('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>

相关文章：