Question

我需要一点这个脚本的帮助。它是一个generator expression，可以将select转换为带有建议的文本字段。当我在表单中使用它时，它提交文本而不是值。

我如何使用获取选项的值而不是文本？

示例：

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

Answer 1

<强> 更新：

获得您正在寻找的价值的另一种方法是：

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

Answer 2

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

编辑jquery可编辑选择

2 个答案: