複数選択フィールドのオプション値をループする

Question

私には選択フィールドがあり、複数のオプションを選択できます。これらのオプションの値は画像URL（「img/image.png」など）です。ユーザーがオプションをクリックすると、選択フィールドの下に画像（または複数の画像が選択されている場合は画像）が表示されます。 jQueryが出力しているものが混乱しています。これまでのところ私が持っている：

$(document).ready(function(){ 

    $('.logo-select').on('change', function(){ 

     var options = $('.logo-select').val(); 

     $(options).each(function(){ 
      console.log(this); 
     }); 

    }); 
}); 

私は、これは各オプションの出力値だろうと想定、代わりに私は私のコンソールで、次を得る：

String {0: "i", 1: "m", 2: "g", 3: "/", 4: "i", 5: "m", 6: "a", 7: "g", 8: "e", 9: ".", 10: "p", 11: "n", 12: "g", length: 20, [[PrimitiveValue]]: "img/image.png"} 

は、なぜそれがダウンし、個々の文字に値を壊しています？イメージパスだけを出力するにはどうすればいいですか？

Answer 1

thisは、アプリケーションのコンテキストで$(options) -Objectを参照しています。 bind -functionと内側のコールバックに、あなたの外側の関数のコンテキストからthisをバインドする

試してみてください。

$(document).ready(function(){ 

    $('.logo-select').on('change', function(){ 
     var options = $('.logo-select').val(); 

     $(options).each(function(){ 
      console.log(this); 
     }.bind(this)); 

    }); 
}); 

thisでの作業は、時には少しトリッキーなことができ、thisは常に文脈それを参照しますから呼び出されます。つまり、eachの内部には、thisは$(options)を表し、外側は$('.logo-select')を表します。

Answer 2

使用thisご選択的に結合する

$(document).ready(function(){ 

    $('.logo-select').on('change', function(){ 
     var options = []; 
     options.push($(this).val()); 

     $(options).each(function(){ 
      console.log(this); 
     }); 

    }); 
}); 

Answer 3

あなたは.on("change", ...)で$(this).find('option:selected')を使用することができますし、あなたは以下のように各ループであなたの結果の配列を埋めることができます。

$(document).ready(function(){ 
 
    $('.logo-select').on('change', function(){    
 
     
 
     var options = $(this).find('option:selected');  
 
     var arr = []; 
 
     
 
     console.clear(); 
 
     $(options).each(function(){ 
 
      arr.push($(this).val()); 
 
     }); 
 
     
 
     console.log(arr); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<select class="logo-select" multiple> 
 
    <option value="img/img1.png">option1</option> 
 
    <option value="img/img2.png">option2</option> 
 
    <option value="img/img3.png">option3</option> 
 
    <option value="img/img4.png">option4</option> 
 
</select>

Answer 4

jsfiddleを確認し、これはあなたに役立つかもしれないhttps://jsfiddle.net/bov3mLqr/

$('.logo-select').on('change', function(){ 

    var options = $('.logo-select').val(); 
    var splitOptions = options.split(','); 
    console.log(splitOptions); 
    for(var i=0; i<splitOptions.length; i++){ 
     console.log(splitOptions[i]); 
    }; 

}); 

あなたは `$（この）.find（ 'オプション：選択した'）を使用することができます