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

Question

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

我还可以 checkin 源代码。我正在尝试通过

获取下拉列表

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

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

});

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

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

Answer 1

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

尝试修改:

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

或者直接使用(你已经有一个id了!):

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

---

编辑:添加了片段

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

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