在 html 选择中显示 AJAX 成功 JSON 值答案

【问题标题】：Show AJAX success JSON values in html selection在 html 选择中显示 AJAX 成功 JSON 值
【发布时间】：2015-03-17 06:13:39
【问题描述】：

我有几个下拉选择的 html 表单，我使用相同的表单来编辑数据，

现在要编辑表中任何行中的数据，我已经创建了 AJAX 请求，一旦选择了行并用户单击编辑，AJAX 将获取具有 ID 的特定行的所有值。

我的 html 表单有一些输入元素和选择元素，我可以使用以下代码在输入元素中显示值，

在我的带有 id 的 html 元素中 - user_name 是输入类型，所以我可以在框中看到数据值，

但是带有 id 的元素 - user_status 是选择类型，我有启用和禁用选项，

      success:function(data){   
        var objData = jQuery.parseJSON(data);           
        $("#user_name").val(objData.user_name);
        $("#user_status").val(objData.user_status);
      }

这是我的 HTML 选择代码，

  <select name="is_manager" id="user_status">
      <option style="width:auto">--Select Status--?</option>
      <option style="width:auto">Enable</option>
      <option style="width:auto">Disable</option>
  </select>

当我单击编辑行时，如何在选择选项中显示 AJAX 返回值启用，简而言之，我想查看选择元素中的现有值。

谢谢，

【问题讨论】：

在您的 json 中，您正在获取文本值或一些 id 以及选项？
你好 Vaibhav，我正在获取 tex 值，比如如果用户启用，那么我会得到 user_status: 'Enable'
你不能直接访问它吗-data.user_name？
@Manoz，我对#user_name 没有意见，因为它的文本框，我可以简单地用 .val() 赋值，但我不能赋值给选择选项，
所以在创建选项时，您现在可以将选项的 value 属性设置为与等标签属性相同在您的成功功能中，您可以按照您设置的方式设置值。

标签： javascript php jquery html ajax

【解决方案1】：

在下面的选择列表中添加了与选项文本相同的选项值

<select name="is_manager" id="user_status"> <option style="width:auto" value="">--Select Status--?</option> <option style="width:auto" value="Enable">Enable</option> <option style="width:auto" value="Disable">Disable</option> </select>

然后在 jquery 中，您可以使用以下代码将现有值设置为选中

$("#user_status option[value="+objData.user_status+"]").attr("selected","selected")

希望对你有帮助

【讨论】：

逻辑上看起来不错，但似乎不起作用，我在控制台中收到以下消息，jQuery.fn.attr('selected') 可能使用属性而不是属性，有什么想法吗？
你能试试.prop("selected",true)而不是attr("selected","selected")吗？可能是由于 jquery 版本问题，您收到该错误消息。
谢谢，现在控制台中没有消息，但我仍然没有选择启用，----我的问题，这个 ID 应该保存在哪里，id="user_status"，是否应该在选择中元素还是在选项元素中？
应该设置为select语句而不是option元素。 Jquery 将根据#user_status id 找到选择列表，然后查找其选项值（Enable,Disable），如果这些选项值中的任何一个与 json 输出数据（objData.user_status）匹配，则将其标记为选中.确保user_status id 没有用于页面上的任何其他元素
我完全理解逻辑，我也检查了 ID，没有分配给其他元素，我也检查了其他页面，但是无论什么原因，似乎“选定”属性不适用于选项元素，当我点击编辑时，我总是在下拉菜单中获得选项的第一个条目\值。

【解决方案2】：

我的意思是，如果您为所有选项设置了一些值属性，例如

 <select name="is_manager" id="user_status">
      <option style="width:auto" value="0">--Select Status--?</option>
      <option style="width:auto" value="1">Enable</option>
      <option style="width:auto" value="2">Disable</option>
  </select>

然后，如果您从服务器端获取值为“1”或“2”，那么您可以使用您编写的$("#user_status").val(objData.user_status);

如果您只收到“启用”或“禁用”的文本，那么您可以使用

var user_status = $('#user_status);
    user_status.val(user_status.find('option: contains('+objData.user_status+')').val()));

如果您不使用 value 属性，则在选项中创建 value 属性，例如

<select name="is_manager" id="user_status">
      <option style="width:auto" value="0">--Select Status--?</option>
      <option style="width:auto" value="Enable">Enable</option>
      <option style="width:auto" value="Disable">Disable</option>
  </select>

现在在这种情况下，您编写的普通代码将可以工作。

【讨论】：

它不起作用，我在控制台中收到以下消息，未捕获错误：语法错误，无法识别的表达式：选项：包含（禁用）

【解决方案3】：

使用这个

$('#user_status&gt;option[value="'+objData.user_status+'"]').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="is_manager" id="user_status">
      <option style="width:auto" value="0">--Select Status--?</option>
      <option style="width:auto" value="Enable">Enable</option>
      <option style="width:auto" value="Disable">Disable</option>
  </select>

【讨论】：