Question

串联2个值，选择2个下拉字段，没有空格

使用在2个下拉框中选择的2个字符串，并将它们组合成单个字符串，并且两者之间没有空格

我搜索了使用CSS或HTML进行此操作的方法，但无法弄清楚。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="">
  <div>
    <h3>Ship and Bill To Department</h3>
    <select name="departments" ng-model="departmentSelect" [(value)]="departmentSelected">
      <option value="">--Select--</option>
      <option value='COP-'>OPERATIONS</option>
      <option value='TLG-'>LOGISTICS</option>
      <option value='TR-'>RECRUITING</option>
    </select>
  </div>

  <div>
    <h3>Ship and Bill To State</h3>
    <select name="states" ng-model="stateSelect" [(value)]="stateSelected">
      <option value="">--Select--</option>
      <option value='AZ'>ARIZONA</option>
      <option value='CA'>CALIFORNIA</option>
      <option value='CO'>COLORADO</option>
    </select>
  </div>

  <h3 id="departmentSelect">You selected: </h3>
  <span class="selected" ng-bind="departmentSelect">{{departmentSelected}}</span>
  <span class="selected" ng-bind="stateSelect">{{stateSelected}} </span>
</body>

在两者之间添加一个空格：COP-AZ 我需要它是COP-AZ

Answer 1

您可以执行以下操作=> ng-bind =“（departmentSelect）+（stateSelect）”

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="">
  <div>
    <h3>Ship and Bill To Department</h3>
    <select name="departments" ng-model="departmentSelect" [(value)]="departmentSelected">
      <option value="">--Select--</option>
      <option value='COP-'>OPERATIONS</option>
      <option value='TLG-'>LOGISTICS</option>
      <option value='TR-'>RECRUITING</option>
    </select>
  </div>

  <div>
    <h3>Ship and Bill To State</h3>
    <select name="states" ng-model="stateSelect" [(value)]="stateSelected">
      <option value="">--Select--</option>
      <option value='AZ'>ARIZONA</option>
      <option value='CA'>CALIFORNIA</option>
      <option value='CO'>COLORADO</option>
    </select>
  </div>

  <h3 id="departmentSelect">You selected: </h3>
  
  <span class="selected" ng-bind="(departmentSelect) + (stateSelect) "></span>
  </p>
</body>

Answer 2

请勿在结束标记</span>与第二个<span>的开始标记之间放置任何空格：

  <span class="selected" ng-bind="departmentSelect"
  ></span><span class="selected" ng-bind="stateSelect"></span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="">
  <div>
    <h3>Ship and Bill To Department</h3>
    <select name="departments" ng-model="departmentSelect">
      <option value="">--Select--</option>
      <option value='COP-'>OPERATIONS</option>
      <option value='TLG-'>LOGISTICS</option>
      <option value='TR-'>RECRUITING</option>
    </select>
  </div>

  <div>
    <h3>Ship and Bill To State</h3>
    <select name="states" ng-model="stateSelect">
      <option value="">--Select--</option>
      <option value='AZ'>ARIZONA</option>
      <option value='CA'>CALIFORNIA</option>
      <option value='CO'>COLORADO</option>
    </select>
  </div>

  <h3 id="departmentSelect">You selected: </h3>
  <span class="selected" ng-bind="departmentSelect"
  ></span><span class="selected" ng-bind="stateSelect"></span>

</body>

如何避免在两个`<span>`元素之间渲染空间

串联2个值，选择2个下拉字段，没有空格

2 个答案: