Jquery - 从页面上的 img alt 标签动态填充选择选项答案

【问题标题】：Jquery - Dynamically populate select options from img alt tags on pageJquery - 从页面上的 img alt 标签动态填充选择选项
【发布时间】：2017-01-23 21:27:52
【问题描述】：

所以我有一个网页，其中包含从 CMS 填充的图像列表。每张图片都有一个 Alt 标签，我想从中提取内容并在页面下方填充一个选择框。

使用 jquery 我如何在页面上找到具有设置类的所有图像，然后从每个匹配的图像中推断出 ALT 值，然后使用图像 ALT 文本动态创建选择框的选项值/字符串？

任何帮助将不胜感激。

编辑：问题 2 @gavgrif 谢谢你的帮助，如果可以的话，还有最后一个问题，所以我已经设法根据你的回答让我的选择框（#imageSelection）选项由 jquery 填充，但是，当我通过 AJX 发布表单时，我得到了下列的值 object htmlselectelement 而不是填充选项的值。

在我的 AJAX > 表单脚本中，我定义了以下内容......

var image = $("#imageSelection").val();

对于我的其他表单输入，.val() 工作正常。

如果您能指出我正确的方向（再次），那将不胜感激。

问候杰夫

【问题讨论】：

您好，欢迎来到 StackOverflow。请花一些时间阅读帮助页面，尤其是名为"What topics can I ask about here?" 和"What types of questions should I avoid asking?" 的部分。更重要的是，请阅读the Stack Overflow question checklist。您可能还想了解Minimal, Complete, and Verifiable Examples。

标签： jquery html arrays

【解决方案1】：

修改@TheYaXxE 的答案 - 您不需要遍历图像来获取类 - 只需确保它是图像的唯一类，然后将该类用作直接选择器。

$('.take-this').each(function() {
	var altValue = $(this).attr('alt');
    $('<option value='+altValue+'>'+altValue+'</option>').appendTo($('select'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img class="take-this" alt="One"/>
<img class="take-this" alt="Two"/>
<img class="not-this" alt="Three"/>
<img class="not-this" alt="Four"/>
<img class="take-this" alt="five"/>
<br/>
<select name="select">
</select>

【讨论】：

哇，谢谢你们！我一直在思考这个问题 4 个多小时，试图弄清楚。谢谢你们的帮助，@gavgrif 你的解决方案非常适合我的需要，非常感谢。
很高兴为您提供帮助-还有一件事-不要忘记您在图像声明中也应该具有大小属性-并且如果图像出于任何原因，则应使用 ALT 文本未加载或被阻止 - 因此文本实际上应该是图像旨在提供的内容或消息的表示。如果您想使用描述性较少的文本 - 那么您可以添加一个数据属性并使用它而不是替代文本
嘿。你偷了我的答案！ :O :)
谢谢你们，关于 data-attr 的观点很重要，我正在处理 CMS 输出的内容，所以当我可以得到概念验证工作时，我会考虑编辑解决方案。如何在此线程中添加第二个问题？我对 Select 的发布值有问题，即 [object HTMLSelectElement]

【解决方案2】：

类似的东西？

$(document).ready(function(){
  var $selector = $('.imgSelector');
  var options = '';

  $('body img').each(function(indx, val){
    options += '<option>' + $(val).attr('alt') + '</option>' 
  });
  console.log(options);
  $selector.html(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <img alt="alt 1" />
  <img alt="alt 2" />
  <img alt="alt 3" />
  <img alt="alt 4" />
  <img alt="alt 5" />
  <select class="imgSelector"></select>
</body>

这取决于您的需求，对您的目标的更多解释可以更改代码。

【讨论】：

【解决方案3】：

像这样？

$('img.take-this').each(function() {
    var altValue = $(this).attr('alt');
    $('<option value='+altValue+'>'+altValue+'</option>').appendTo($('select'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img class="take-this" alt="One"/>
<img class="take-this" alt="Two"/>
<img class="not-this" alt="Three"/>
<img class="not-this" alt="Four"/>
<img class="take-this" alt="five"/>
<br/>
<select name="select">
</select>

【讨论】：

对不起 - 我没有偷它 - 你有一个我修改过的解决方案，然后在我的回答中归功于你。主要区别在于您正在检查元素是否具有指定的类，然后如果是，那么函数是否存在 - 我的意思是您不需要进行检查，您可以使用指定的类 - 我看到你在我发布我的答案后编辑了你的答案的一种方法。所以我没有窃取答案 - 我改进了它并启发了你的编辑。但我确实使用您的代码作为开始 - 这就是为什么我在回答中将它归功于您:)