Yii2:如果未提示 select 值,则更改 div 的 class

Yii2: change class of div if select value is not promtp

我正在使用 Yii2 构建一个测验。所以默认情况下 promtp select 是“--- 选择 ---”。如果用户 select 其他选项 div class 将从“未完成”更改为“已完成”,我想更改。但是我做不对。

我的代码:

$questions = app\models\Quizquestionuser::find()->where(['cate_id' => $id])->orderBy(new Expression('rand()'))->all();

foreach ($questions as $model24){
    
    echo "<div id='box' class='notdone'>";
    
    echo "<h4>" . $model24->title . "</h4>";

    $items2 = ArrayHelper::map(app\models\QuizAnswers::find()->where(['question_id' => $model24->id])->orderBy(new Expression('rand()'))->all(), 'id', 'answer');
    
    echo $form->field($model, 'user_answer[]')->dropDownList($items2, array('prompt'=>'--- Choose ---' ), ['style'=>'width:100px'])->label(false);
    
    echo "</div>";
}

还有我的 JS:

$('select').change(function(){

var newabc  = $(this).find('option:selected').text().toLowerCase();

if(newabc = "--- choose ---"){
    $('#box').removeClass('done').addClass('notdone');
}else{
     $('#box').removeClass('notdone').addClass('done');
}
})

.change();

更新的工作代码:

<script>
        
        
    
$('select').change(function(){

var newabc  = $(this).find('option:selected').text().toLowerCase();

if(newabc === "--- choose ---"){
    $('#box').removeClass('done').addClass('notdone');
}else{
     $('#box').removeClass('notdone').addClass('done');
}
})

.change();
    
    </script>

谢谢!

您正在分配值而不是比较它。

您正在使用 if(newabc = "--- choose ---")

什么时候应该if(newabc === "--- choose ---")

我认为代码在其他方面还可以改进一点,所以我会添加一个片段,这样你就可以直接在这里尝试了。

// Get the values directly from 'this' as a JQuery object.
$("select#s").change(function() {
  const $this = $(this);
  const display = $('#result');
  const selectedOption = $this.find(":selected");
  const selectedOptionValue = selectedOption.val();
  const selectedOptionText = selectedOption.text();
  console.log(`Selected option value is ${selectedOptionValue}`);
  console.log(`Selected option text is ${selectedOptionText}`);

  // Then compare, I would use value instead, but you can use text.
  // if (selectedOptionText !== 'one')
  if (+selectedOptionValue !== 0) {
    $this.removeClass("not-done").addClass("done");
    display.html('Done');
    console.log("Select is done");
  } else {
    $this.removeClass("done").addClass("not-done");
    display.html('Not done');
    console.log("Select is not done");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="result">Not done</div>
<select name="my-select" id="s" class="not-done">
  <option value="0">--Select--</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">four</option>
</select>