jquery選擇下拉列表（數組）選項更改從div類獲取值

我有多個選擇下拉菜單和多個div具有相同的類。每個div都有一個下拉菜單和一個帶有類.dz文件名的div。jquery選擇下拉列表（數組）選項更改從div類獲取值

通過上傳圖像>文件名文本進入div與類.dz文件名和該圖像，您可以選擇一種格式。我想根據選擇將圖像與格式鏈接起來。

我怎樣才能得到文本里面的div與類.dz文件名，並將此文本填入選項值？

提交表格後，我想用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[]"> 
 
\t <option selected="" disabled="" value="-1">Selecteer uw formaat</option> 
 
\t <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> 
 
\t <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>

來源

2017-09-12 webvision

將監聽器綁定到文件輸入onchange事件，獲取這些選項並設置value屬性。 –

您需要設置一個處理程序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); 
});

來源

2017-09-12 13:09:19

是的，好的，這對我很有用，但問題是我不知道這個格式是鏈接到圖像。由於格式在之內，並且該值是文件名。我認爲最好使用選項數組值？ – webvision

您應該使用像'filename.jpg：100x100'這樣的值格式 –

請參閱https：// jsfiddle .net/webvision/fxnjk4cb /它的作品，但所有的值改變了兩個選擇選項 – webvision

這將幫助你。

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

來源

2017-09-12 12:49:42 Ofisora

jquery選擇下拉列表（數組）選項更改從div類獲取值

回答

相關問題