Question

我有一个动态生成的选项select，它将选择的属性添加到具有id值的特定选项，并且我可以根据需要生成它，但是当我有一个带有selected属性的选项时，我总是会得到第一个选项已选择。我写了这个函数来生成选项：

function getProjectType($selected = ""){
$terms = get_terms( array(
    'taxonomy' => 'project_type',
    'parent' => 0,
    'hide_empty' => false,
    'id' => 'project_type' ,
    'show_option_all' => false,
) );

?>
<?php if(!empty($terms)){?>

    <label class="fre-field-title" for="project-type"><?php _e('Please define your project type',MR_DOMAIN) ?></label>
    <div class="mr-select-box">
    <select name="project-type" id="project-type" class="mr-chosen-single" required>
    <option value="" disabled hidden><?php _e('Select project type',MR_DOMAIN) ?></option>
    <?php
    foreach($terms as $term){?>
            <option  id="<?php echo $term->slug.'-'.$term->term_id;?>" value="<?php echo $term->term_id ?>"<?php echo ($selected == $term->term_id) ? 'selected' : '' ?>><?php echo $term->name;?></option>
    <?php }?>
    </select>

    </div>

    <?php }
}

此函数应接受一个值，并将所选属性添加到具有该值的选项中。然后调用它，这是生成的选项：

<select name="project-type" id="project-type" class="mr-chosen-single" required="">
    <option value="" disabled="" hidden="">select</option>
    <option id="project-type-image-147" value="147">147</option>
    <option id="project-type-video-145" value="145" selected="">145</option>
    <option id="project-type-website-146" value="146">146</option>
    <option id="project-type-audio-144" value="144">144</option>
</select>

如您所见，选项145已选择属性，但是我需要它显示为选中状态，但总是将第一个选项显示为选中状态，而如果我将生成的列表复制到单独的html文件中，它将起作用，为什么动态时不起作用生成。

Answer 1

正如其他人所提到的，我无法重现您的问题。我已经复制了您的HTML代码段，并添加了一些JS来使用它。它返回预期的结果-“ 145”和索引2

function byId(id){return document.getElementById(id)}

function testFunc()
{
  var testElem = byId('project-type');
  var selStr = testElem.value;
  var result = -1;
  var options = [...testElem.options];
  
  options.forEach( function(el,idx){if (el.selected) result = idx;} );
  
  var msg = `Val: ${selStr}, Index: ${result}`;
  alert(msg);
}

window.addEventListener('load', onWndLoaded, false);

function onWndLoaded(evt)
{
  testFunc();
}

<select name="project-type" id="project-type" class="mr-chosen-single" required="">
    <option value="" disabled="" hidden="">select</option>
    <option id="project-type-image-147" value="147">147</option>
    <option id="project-type-video-145" value="145" selected="">145</option>
    <option id="project-type-website-146" value="146">146</option>
    <option id="project-type-audio-144" value="144">144</option>
</select>

默认情况下无法选择选项

1 个答案: