Question

我需要你的帮助。我正在尝试在javascript函数中更改combobox的默认值。

应该是当我单击单选按钮时。单选按钮功能的调用可以，但是我没有成功更改组合框的默认值。

class RegisterController extends Controller
{

  // some code ... 


 protected function validator(array $data)
    {
        return Validator::make($data, [
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:6|confirmed',

            'gender' => 'required',
            'date_of_birth' => 'required'
        ]);
    }


     protected function create(array $data)
        {
            return User::create([
                'name' => $data['email'],
                'email' => $data['email'],
                'password' => bcrypt($data['password']),

                'gender' => $data['gender'],
                'date_of_birth' =>  $data['date_of_birth'],
            ]);
        }
}

 function contractRoleClick(option)
    {
    var assetsComboBox = document.getElementById("sellersAssetsCombobox");
            assetsComboBox.disabled = true; //irrelevant
            
            if (option.value == 2)
            {
               document.getElementById('sellersAssetsCombobox').option[0].value = "bbb"; //not working

                document.getElementById("sellersAssetsCombobox").selectedIndex = 0; //the only line that work, but I don`t need it!
                document.getElementById("sellersAssetsCombobox").options[0] = "aaa"; //not working
                document.getElementById("sellersAssetsCombobox").options.item(0).text = "asd"; //not working
            }
        }

当我单击单选按钮时，该功能应将默认值“打开以选择卖方的资产”更改为新值：“打开以选择您的资产”，并将之前选择的所有值重置为新价值。重置为deaflut索引是可行的，但是我需要像之前提到的那样对其进行更改。

任何帮助将不胜感激！

海姆

Answer 1

这是解决方案：

function contractRoleClick(option)
    {
        var assetsComboBox = document.getElementById("sellersAssetsCombobox");
        assetsComboBox.disabled = true;
        //Open this to select Seller`s assets
        if (option.value == 2) {

            var myComboBox = document.getElementById('sellersAssetsCombobox');
            var optionCombo = document.createElement("option");

            myComboBox.remove(0);
            optionCombo.text = "Open this to select your asset";
            myComboBox.add(optionCombo,0);
            myComboBox.selectedIndex = 0;

        }
    }

反正。海姆

Answer 2

如果要更改组合框的默认值（选定？），只需设置其.value即可。您无需四处走动。

如果要更改选项的文本，请使用.innerHTML

function contractRoleClick(option) {
  document.getElementById("sellersAssetsCombobox").value = option;
}
function changeTextOfSelected() {
  document.getElementById('sellersAssetsCombobox').options[
    document.getElementById('sellersAssetsCombobox').selectedIndex
  ].innerHTML = 'Changed this ' + Math.random()
}
btn1.addEventListener('click', () => contractRoleClick(1));
btn2.addEventListener('click', () => contractRoleClick(2));
btn3.addEventListener('click', () => {
  contractRoleClick(3); changeTextOfSelected();
});

<select class="custom-select" id="sellersAssetsCombobox" onchange="getAssetDetails(this)">
  <option value="0" selected="" >Open this to select Seller`s assets</option> <!--I want to change this value-->
  <option value="1">Code: 15524  ->  Value: 366 ETH</option>
  <option value="2">Code: 74121  ->  Value: 841 ETH</option>
  <option value="3">Code: 66473  ->  Value: 510 ETH</option>
</select>
<button id="btn1">Select 1</button>
<button id="btn2">Select 2</button>
<button id="btn3">Select and Change 3</button>

如何在JavaScript中编辑组合框的默认值

2 个答案: