如何使用 jquery 从下拉列表中获取文本并将其插入到输入文本中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="sr-only control-label" for="id_lines-0-item">
Item 0:
</label>
<select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
<option value="">---------</option>
<option value="2">Baja</option>
<option value="3">Fish</option>
<option value="4">Tacos</option>
</select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
<div class="form-group">
<label class="sr-only control-label" for="id_lines-1-item">
Item 1:
</label>
<select class="form-control" id="id_lines-1-item" name="lines-1-item" title="">
<option value="">---------</option>
<option value="2">Baja</option>
<option value="3">Fish</option>
<option value="4">Tacos</option>
</select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-1-label" type="text" />
<div class="form-group">
<label class="sr-only control-label" for="id_lines-2-item">
Item 2:
</label>
<select class="form-control" id="id_lines-2-item" name="lines-2-item" title="">
<option value="">---------</option>
<option value="2">Baja</option>
<option value="3">Fish</option>
<option value="4">Tacos</option>
</select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-2-label" type="text" />
<script>
var label1 = document.getElementById('id_lines-0-item');
var strlabel1 = label1.options[label1.selectedIndex].text;
$('input:text').val(strlabel1);
</script>
我试过上面的代码,但它不起作用,如果这是一个愚蠢的问题,请原谅我,因为我正在学习 jquery。
我已经更新了我的问题。我需要使用 id="id_lines-0-item"
从下拉列表中获取文本,并将值设置为使用 id="id_lines-0-label"
输入文本并分别使用 id="id_lines-1-item"
从下拉列表中获取值,并将值设置为使用 id="id_lines-1-label"
和很快。这可以使用 DRY(不要重复自己)来完成吗?
最佳答案
您可以在 select
下拉菜单中关联一个 onchange()
函数,并使用 selection.options[selection.selectedIndex].text
来获取所选选项的文本使用 JavaScript。因为,您有 id
作为 text
输入,所以最好使用 id
选择器。在你的情况下 $('#id_lines-0-label')
。此外,由于您有单独的文本输入用于单独的下拉列表,并且您不想为所有三个下拉列表重复代码,因此最好使用下拉列表的 id
中的数字值。使用此值并连接以获取 input
框的 id
。
function onchangeFn(selection) {
var id= $(selection).attr('id');
var num = id.match(/\d+/)[0];
var strlabel1 = selection.options[selection.selectedIndex].text;
$('#id_lines-'+num+'-label').val(strlabel1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="sr-only control-label" for="id_lines-0-item">
Item 0:
</label>
<select class="form-control" id="id_lines-0-item" name="lines-0-item" title="" onchange= 'onchangeFn(this)'>
<option value="">---------</option>
<option value="2">Baja</option>
<option value="3">Fish</option>
<option value="4">Tacos</option>
</select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
<div class="form-group">
<label class="sr-only control-label" for="id_lines-1-item">
Item 1:
</label>
<select class="form-control" id="id_lines-1-item" name="lines-1-item" title="" onchange = 'onchangeFn(this)'>
<option value="">---------</option>
<option value="2">Baja</option>
<option value="3">Fish</option>
<option value="4">Tacos</option>
</select>
</div>
<input id="id_lines-1-label" maxlength="255" name="lines-1-label" type="text" />
<div class="form-group">
<label class="sr-only control-label" for="id_lines-2-item">
Item 2:
</label>
<select class="form-control" id="id_lines-2-item" name="lines-2-item" title="" onchange = 'onchangeFn(this)'>
<option value="">---------</option>
<option value="2">Baja</option>
<option value="3">Fish</option>
<option value="4">Tacos</option>
</select>
</div>
<input id="id_lines-2-label" maxlength="255" name="lines-2-label" type="text" />
关于jquery - 从下拉列表中获取文本并使用 JQuery 将其插入到输入文本中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49851047/