jQuery Select select下拉词(数组)选项更改中的DIV类获取值

Question

我有多个选择的下拉次数，并且具有同一类的多个DIV。每个DIV有一个下拉级，一个div带有一个.dz-filename。

通过上传图像>文件名文本使用类.dz-filename进入DIV，对于该图像，您可以选择格式。我想根据选择将图像与格式联系起来。

如何将文本与class .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);
});

Answer 2

我希望这对您有帮助。

$(document).ready(function() {
  $(".dz-select-system").change(function() {
    //$(this).find(".dz-filename span").text();
    //console.log($(this).prev().prev().find("span").text());
    var filename = $(this).prev().prev().find("span").text();
    alert(filename);
//OR var filename = $(this).prevUntil(".dz-filename span").text().trim();
  });
});

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