我想创建一个具有多个下拉菜单的表单,根据您在每个下拉菜单中单击的内容,将创建一段段落。
例如:
下拉菜单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>