编辑jquery可编辑选择
编辑jquery可编辑选择
提问于 2016-07-18 21:03:30
我需要一点关于这个脚本的帮助。它是一个将select转换为带建议的文本字段的jQuery Plugin。当我在表单中使用它时，它会提交文本，而不是值。
如何使用get选项的值而不是文本？
示例：
<link rel="stylesheet" href="https:rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css">
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
window.onload = function () {
$('#basic').editableSelect();
}
</script>
它应该发送"000"而不是"zero"，结果是domian.com/page.php?data=000而不是domian.com/page.php?data=zero。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-18 21:39:48
更新：
获取所需值的另一种方法是：
$('#basic').siblings('.es-list').find('li.selected').data('value')对于文本，您可以使用：
$('#basic').siblings('.es-list').find('li.selected').text()的老答案：
插件jquery-editable-select公开了一个名为"onSelect“的事件。
因此，您需要为该事件附加一个事件处理程序，并侦听表单submit：
$(function () {
var selectedEleValue = null;
$('#basic').editableSelect({
onSelect: function (element) {
selectedEleValue = element.val();
console.log('The val is: ' + element.val() + ' The text is: ' + element.text());
}
});
$('form[action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/"]').on('submit', function(e) {
if (selectedEleValue != null) {
$('#basic').val(selectedEleValue);
}
})
});<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
Stack Overflow用户
发布于 2018-06-07 21:17:58
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<link href="./jquery-editable-select-master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="./jquery-editable-select-master/dist/jquery-editable-select.min.js"></script>
<script type="text/javascript">
$(function () {
$('#basic').editableSelect();
});
function abc(){
var basic_text = document.getElementById('basic').value;
var basic_value = $('#basic').siblings('.es-list').find('li.selected').attr('value');
console.log(basic_text);
console.log(basic_value);
}
</script>
</head>
<body>
<form method="post" id="form_id" action="">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button" onclick="abc();">Submit</button>
</form>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38437449
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号