jQuery获取动态呈现下拉列表的选项

Question

我正在开发一个MVC + jQuery项目，我在运行时创建下拉列表。在通过jQuery提交表单的同时渲染后，我试图获得选定的值。下拉呈现并正常工作

我也可以查看源代码。我想通过

获得下拉列表

 $('#Monday_Periods').children('.PeriodRow').each(function () {

    var elements = $(this).html();
    var found = $('.Subject', elements);           

});

我在变量found中找到了所有对象，我可以在Chrome调试中看到它

但在此之后我无法获得选定的价值。正如您在调试模式中看到的那样，没有选择任何选项。我试图通过val或text但没有运气。任何人都可以告诉我如何获得选定值

Answer 1

$(this).html();正在丢失对DOM的引用（html()返回一个String，而不是一个DOM节点。）

尝试修改：

var elements = $(this);
var found = $('.Subject', elements);
found.each(function(el){
   console.log($(this).val());
}           

或直接使用（你已经有了一个id！）：

$('#subject1').val(); 

编辑：SNIPPET ADDED

＆＃13;

＆＃13;

function printResults(){
  $('#Monday_Periods').children('.PeriodRow').each(function () {

      var elements = $(this);
      var found = $('.Subject', elements);
      found.each(function(el){
         console.log($(this).val());
      });           
    
  });
}

$('#print-results').click(printResults);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form id="Monday_Periods">
  <div class="PeriodRow">
    <select class="Subject">
      <option value="none">-- Select Subject --</option>
      <option value="1">Biology</option>
      <option value="2">Physics</option>
    </select>
    
    <select class="Subject">
      <option value="none">-- Select Subject --</option>
      <option value="1">Biology</option>
      <option value="2">Physics</option>
    </select>

  </div>
  <button type="button" id="print-results">PRINT RESULTS</button> 
</form>

＆＃13;

＆＃13;

＆＃13;