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>
我正在使用 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>