个性化阅读
专注于IT技术分析

默认情况下无法选择选项

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

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具有selected属性, 但是我需要它显示为选中状态, 但始终将第一个选项设为选中状态, 而如果我将生成的列表复制到单独的html文件中, 它将起作用, 为什么动态生成时不起作用。


#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>
赞(0) 打赏
未经允许不得转载:srcmini » 默认情况下无法选择选项
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏