Select Box Value

Developing web applications in Struts 1.3.
So there's something I want to do.
Here's what I want to do:

1. Use the select box on the form screen (JSP) to display the value from DB.

Example ▽
　　0001 AAA
　　0002BBB←Select
　　0003CC

2. Display some of the values in the select box when selected, and
Display values that you do not want to display in a different text box

Example 0002▽ (BBB should not be displayed)

BBB (←text box)

The above 1 process has been accomplished, but
2 has not been processed.

If anyone knows more,
I look forward to hearing from you.

javascript java html struts

2022-09-30 12:04

1 Answers

Basically, you only need to process the value selected in the change event of the SELECT element, but you need to make some effort to display it in the SELECT element.

Proposal 1: Force the width of the SELECT element.

The appropriate width depends on the font and browser, so I think it's relatively difficult to make it work in any environment.The following snippets work well with Chrome on macOS, but they may not work well in other environments.

 document.querySelector('#s1').addEventListener('change', function(event){
  consts=event.target;
  const v = s.value;
  const input = document.querySelector('#i1');
  if(v=='){
    input.value=';
    s.classList.remove('shrink')
    return;
  }
  s.classList.add('shrink')
  input.value = v.split('')[1];
  input.focus();
  input.setSelectionRange(input.value.length, input.value.length);
});

select{
  font-size: 16px;
  font-family:monospace;
}
.shrink{
  - webkit-appearance: none;
  width —84px;
}

<select id="s1">
<option value="">Please select</option>
<option> 麻106-0047 Minami Azabu, Minato-ku, Tokyo;/option>
<option> 107107-0062 Minami Aoyama, Minato-ku, Tokyo;/option>
<option>108-0072 Tokyo Minato Ward Platinum</option>
</select>
<input id="i1">

Proposal 2:Do not use SELECT elements for display

You need to overlap the SELECT and display elements well in order to bring up the menu.

This snippet isn't very serious.

 document.querySelector('#s2') .addEventListener('change', function(event){
  constp= document.querySelector('#proxy')
  consts=event.target;
  const v = s.value;
  const input = document.querySelector('#i2');
  if(v=='){
    p.textContent='Select'
    input.value=';
    return;
  }
  p.textContent=v.split('')[0];
  input.value = v.split('')[1];
  input.focus();
  input.setSelectionRange(input.value.length, input.value.length);
});

#proxy{
  position:absolute;
  border —1px split black;
  background —ButtonFace;
  display:inline-block;
  font-size: 14px;
  font-family:sans-serif;
  width —8em;
}
#s2{
  font-size: 14px;
  font-family:sans-serif;
  opacity:0.01;
  width —8em;
}

<divid="proxy">Select</div>
<select id="s2">
<option value="">Please select</option>
<option> 麻106-0047 Minami Azabu, Minato-ku, Tokyo;/option>
<option> 107107-0062 Minami Aoyama, Minato-ku, Tokyo;/option>
<option>108-0072 Tokyo Minato Ward Platinum</option>
</select>
<input id="i2">

Proposal 3: No SELECT elements

With a UI library that has the same functionality as the SELECT menu, you may be able to customize the display.

2022-09-30 12:04

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656