javascript - Jquery 选择下拉菜单(数组)选项更改从 div 类获取值

Question

我有多个选择下拉列表和多个具有相同类的 div。 每个 div 都有一个下拉菜单和一个带有类 .dz 文件名的 div。

通过上传图像 > 文件名文本进入带有 .dz-filename 类的 div，您可以为该图像选择一种格式。我想根据选择将图像与格式链接起来。

如何获取 .dz-filename 类的 div 内的文本并将该文本填充到选项值中？

提交表单后，我想使用php查看哪种格式链接到哪个图像

例如:

$(document).ready(function() {
    $(".dz-select-system").change(function(){
       var filename = $(".dz-filename span").text();
alert(filename);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="file_upload_container" class="dropzone dz-clickable dz-started dz-max-files-reached">
<div class="upload">
<div class="dz-filename">
<span data-dz-name="">banner.jpg</span>
</div>
<input type="hidden" class="picture_upload" name="picture_upload[]">
<select class="dz-select-system" style="width: 100%;margin-top: 10px;" name="format[]">
	<option selected="" disabled="" value="-1">Selecteer uw formaat</option>
	<option value="{HERE FILENAME IF THIS OPTION IS SELECT BY USER banner.jpg}">100 x 100, Geen, 1</option>
    <option value="{HERE FILENAME IF THIS OPTION IS SELECT BY USER banner.jpg}">80 x 80, Geen, 1</option>
    <option value="{HERE FILENAME IF THIS OPTION IS SELECT BY USER banner.jpg}">50 x 50, Geen, 1</option>
    <option value="{HERE FILENAME IF THIS OPTION IS SELECT BY USER banner.jpg}">70 x 70, Geen, 1</option>
</select>
</div>
<div class="upload">
<div class="dz-filename">
<span data-dz-name="">photobanner1.jpg</span>
</div>
<input type="hidden" class="picture_upload" name="picture_upload[]">
<select class="dz-select-system" style="width: 100%;margin-top: 10px;" name="format[]">
<option selected="" disabled="" value="-1">Selecteer uw formaat</option>
	<option value="{HERE FILENAME IF THIS OPTION IS SELECT BY USER photobanner1.jpg}">100 x 100, Geen, 1</option>
    <option value="{HERE FILENAME IF THIS OPTION IS SELECT BY USER photobanner1.jpg}">80 x 80, Geen, 1</option>
    <option value="{HERE FILENAME IF THIS OPTION IS SELECT BY USER photobanner1.jpg}">50 x 50, Geen, 1</option>
    <option value="{HERE FILENAME IF THIS OPTION IS SELECT BY USER photobanner1.jpg}">70 x 70, Geen, 1</option>
</select>
</div></div>

Answer 1

您需要为调用函数的文件输入的 onchange 事件设置一个处理程序:

• 选择该输入的范围
• 使用选定的文件名更新范围文本
• 使用所选文件名更新相应的选择选项

添加:您可以选择一个为不同输入字段设置值的控件 ...

<select class="dz-select-system" style="width: 100%;margin-top: 10px;">
  <option selected="" disabled="" value="-1">Selecteer uw formaat</option>
  <option>100 x 100, Geen, 1</option>
  <option>80 x 80, Geen, 1</option>
  <option>50 x 50, Geen, 1</option>
  <option>70 x 70, Geen, 1</option>
</select>
<input id="fileNameWithFormat"name='fileNameWithFormat[]' type="hidden"> <!-- this will get value based on input from select option-->
...

接下来，更新您的 Javascript 以设置添加的隐藏输入的值。我在这里使用了“::”分隔符。您可以决定使用逗号或其他任何内容。

在 PHP 中，您将从该字段读取值并按分隔符分割以获取文件名和文件格式。

$(".dz-select-system").change(function() {
    var $this = $(this);
    var $parent = $this.parent();
    var fileFormat = $this.val();
    var fileName = $parent.find('.dz-filename span').text();

    $parent.find('#fileNameWithFormat').val(fileName + '::' + fileFormat);
});