javascript - 在更改功能上使用 jQuery 设置标签

Question

我有这个html select标签:

<select name="title_'+ field +'" class="form-control form_select_tag">
    <option value="h1">h1</option> 
    <option value="h2">h2</option> 
    <option value="h3">h3</option> 
    <option value="h4">h4</option> 
    <option value="h5">h5</option> 
    <option value="h6">h6</option> 
</select> 

现在，我想从此选择标记获取值并将该值设置为名为 tag 的变量。为此，我使用以下代码:

var label   =   $(this).find('.form_input_label').val();
var name    =   $(this).find('.form_input_name').val();

if ( data_type === 'title' ) {

    var placeholder     =   $(this).find('.form_input_placeholder').val();                
    var tag             =   'h3';

    $('.form_select_tag').change(function() {
        tag     =   $(this).val();                    
    });


    html += '<' + tag + '>' + label + '</' + tag + '>';
}

现在，这一行:html += '<' + tag + '>' + label + '</' + tag + '>';变量tag值未设置:(

我该怎么做？

Answer 1

您可以直接调用 $('.form_select_tag').val(); 而不是 $(this).val();

下一个问题是

$('.form_select_tag').change(function() {...});

设置命令是否无法获取，如果您想要这样做，则需要将var tag设置为全局

var 标签不会重新声明每个函数调用

这就是您所需要的，对吗？

createResult();
$('.form_select_tag , .form_input_label').on('change input', function() {
  createResult();
});


function createResult() {
  var html = '<br>Result:<br>'; //your code here
  var data_type = 'title'; //your code here

  var label = $('.form_input_label').val();
  var name = $('.form_input_name').val();
  if (data_type === 'title') {
    var placeholder = $('.form_input_placeholder').val();
    var tag = 'h3'
    tag = $('.form_select_tag').val();
    html += '<' + tag + '>' + label + '</' + tag + '>';
  }
  
  $('.label').html(html);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="title_'+ field +'" class="form-control form_select_tag">
  <option value="h1">h1</option>
  <option value="h2">h2</option>
  <option value="h3">h3</option>
  <option value="h4">h4</option>
  <option value="h5">h5</option>
  <option value="h6">h6</option>
</select>
<input type="text" class="form_input_label" value="label">

<label class="label">Male</label>