Question

我有多个选择下拉列表和多个具有相同类的div。每个div都有一个下拉列表和一个带有.dz-filename类的div。

通过上传图片＆gt;文件名文本使用类.dz-filename进入div，对于该图像，您可以选择一种格式。我想根据选择将图像与格式链接。

如何使用类.dz-filename获取div中的文本并将此文本填入选项值？

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

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要为调用函数的文件输入设置Activity事件的处理程序：

选择该输入的范围
使用所选文件名
使用所选文件名

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

onchange

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

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

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

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>

Jquery选择从div类更改获取值的下拉列表（数组）选项

2 个答案: