如何在单击另一个选择框选项时使用复选框中的选项更改选择框中的值

时间:2016-10-27 09:11:55

标签: javascript jquery html

我有一个html选择框,其中包含复选框

中的选项



<select id="chk1" multiple="multiple" class="form-control">
             <option value="1">Option 1</option>
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
    </select> 
    if i clicked on option 1 ,I want to change the values of another checkbox based on the click.
     <select id="chk2" multiple="multiple" class="form-control">
             <option value="1">Option 1</option>
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
    </select> 
&#13;
&#13;
&#13;

怎么可能?

5 个答案:

答案 0 :(得分:1)

您可以使用Missing argument 2 for Illuminate\Hashing\BcryptHasher::check(), called in C:\xampp\htdocs\Missionseek2\vendor\laravel\framework\src\Illuminate\Support\Facades\Facade.php on line 237 and defined 并反向执行此操作。

如果您只希望public function postSignIn(Request $request){ $val = DB::table('ministry')->where('Username', Input::get('Username'))->first(); if ($val && Hash::check(Input::get('Password', $val->Password))) { return redirect()->route('agencydash'); } return 'failed'; // if (Auth::attempt(['Username' => $request['Username'], 'Password' => $request['Password']])) { // return redirect()->route('agencydash'); // } //return redirect()->back(); } 可以更改$('.first').val( $('.second').val())

参见此演示:

select#1
select#2
$('.first').on('change', function() {
    $('.second').val($(this).val());
});

具有保留更改值的通用版

编辑:已更新,您现在可以添加更多select { width: 100px; } select option { padding: 5px; }框。代码现在更通用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br>

<select class="first" multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>


<select class="second" multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select>
// if you have only two select and do something between the operation is this the more clean solution. But yes, you can do all in one onChange function if you make out which one is actually "changing" (see below)
$('.first').on('change', function() {
    $('.second').val($(this).val());
});

$('.second').on('change', function() {
    $('.first').val($(this).val());
});


// for any count of select
$('select').on('change', function() {
    $('select').not(this).val($(this).val());
});


// code for testing only
$('button').click(function() {
  $('body').append($('select').first().clone());
  
  $('select').off('change').on('change', function() {
    $('select').not(this).val($(this).val());
  });
  
  $('select').trigger('change');
});

答案 1 :(得分:0)

使用简单的javascript进行申请。将值与另一个匹配

&#13;
&#13;
function run(){

    document.getElementById("chk2").value=document.getElementById("chk1").value
  
  }
&#13;
<select id="chk1" multiple="multiple" class="form-control" onchange="run()">
             <option value="1">Option 1</option>
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
    </select> 
    if i clicked on option 1 ,I want to change the values of another checkbox based on the click.
     <select id="chk2" multiple="multiple" class="form-control">
             <option value="1">Option 1</option>
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
    </select>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

将多个$('.first, .second')not(this)

一起使用
$('.first, .second').on('change', function() {
    $('select').not(this).val($(this).val());
});

<强>交替,

$('.first, .second').on('change', function() {
   $(this).attr('class') == 'first' ? $('.second').val($(this).val()) : $('.first').val($(this).val())
}); 

仅供参考,而不是select选择器,您还可以为相应的select tags定义公共类

&#13;
&#13;
$('.first, .second').on('change', function() {
    $('select').not(this).val($(this).val());
});

/*$('.first, .second').on('change', function() {
  $(this).attr('class') == 'first' ? $('.second').val($(this).val()) : $('.first').val($(this).val()) 
});*/
&#13;
select {
  width: 100px;  
}

select option {
  padding: 5px;  
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="first" multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>


<select class="second" multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

将jQuery插件添加到您的网页

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

将jQuery代码添加到您的网页

<script>
    $('#chk1').on('change', function() {
        $('#chk2').val($(this).val());
    });
</script>

答案 4 :(得分:0)

试试这个。

<select class="first ddl" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<select class="second ddl" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
    $('.ddl').on('change', function () {
        $('.ddl').not($(this)).val($(this).val());
    });
</script>