文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery选择下拉(数组)选项从div类中获取值

问Jquery选择下拉(数组)选项从div类中获取值
EN

Stack Overflow用户

提问于 2017-09-12 12:23:32

回答 2查看 2K关注 0票数 0

我有多个选择下拉列表和同一个类的多个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>

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-12 13:09:19

您需要为文件输入为onchange事件设置一个处理程序，该事件将函数调用为：

为该输入选择范围
用选定的文件名更新span文本
用选定的文件名更新相应的选择选项

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

<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);
});

票数 1

Stack Overflow用户

发布于 2017-09-12 12:49:42

我希望这能帮到你。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46176309

复制

相似问题

问Jquery选择下拉(数组)选项从div类中获取值
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery选择下拉(数组)选项从div类中获取值EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery选择下拉(数组)选项从div类中获取值
EN